Noteworthy Programming Masterpiece
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

rsuite-form

0.1.20 • Public • Published

rsuite form

简单的表单控件, 基本只做两件事

  • 收集数据
  • 校验数据

Install

install via npm

npm install rsuite-form

Example

import { Form, Field } from 'rsuite-form';

render() {
    const schema = SchemaBuilder({
        email: StringType('input invalid')
    });

    return (
        <Form schema={schema} formData={this.state.data}>
            <Field name="email"> <PlainText onChange={() => console.log('field changed')}/> </Field>
            <SubmitBtn />
        </Form>
    );
}

API

<Form />

表单基础组件, 一张表单对应一个 <Form />

props

  • schema:schema object 用来校验表单数据. 请看 rsuite-schema
  • formData: object 表单数据, 以每项数据的 name 作为 key 存储对应 value
  • onChange:function 当 formData 发生变化时自动调用该方法
  • force:bool 强制校验, 默认 false

<Field />

表单域组件, 一条表单数据对于一个 <Field />

props

  • name:string 表单数据 name
  • force:bool 强制校验, 默认 false, 当该值未指定时, 会使用 <Form /> 的设置, 该设置会覆盖<Form />的设置

children

输入控件作为 children 传入, 每个 Field 应仅有一个控件, 否则多余的控件将被忽略.

License

MIT License

Install

npm i rsuite-form

DownloadsWeekly Downloads

1

Version

0.1.20

License

MIT

Last publish

Collaborators

  • avatar
  • avatar