AntDを使用してフォームで反応

AntDを使用してフォームで反応

1.双方向のデータバインディング

render() {
    const { getFieldDecorator } = this.props.form;//双向数据绑定
    return (
      <div>
        <Form >
          <FormItem label="姓名">
            {getFieldDecorator('userName')(
              <Input></Input>
            )}
          </FormItem>
        </Form>
      </div>
    );
 }

注意点

• 私たちは、直接文句データを受け入れるようにForm.create（オプション）を使用する
  と、最終的にはJSファイルに次のコードを追加します

form = Form.create({})(form);
export default form

• 時間の初期値を設定します。

フォームで直接使用することはできませんvalue=、これはエラーになります。

警告：getFieldDecorator上書きされますvalueので、設定しないでください、value直接使用しsetFieldsValue、それを設定します。

InitalValueはgetFieldDecoratorの必要な値を設定する必要があります

 <Form.Item key={i} >
            {getFieldDecorator(field,{
              initialValue:item.initLabel,//设置的默认值
            })(
              <Select
                style={{ width: '120' }}
                onChange={this.handleCurrencyChange}
              >
                {BaseUI.getOptionList(item.Options)}
              </Select>
            )}
</Form.Item>

2.取得フォームデータ

ここでは例として、別のコンポーネントをユーザーフォーム形成するために取り外されて
、我々は他のページでユーザーフォームのコンポーネントを導入します

 <UserForm wrappedComponentRef={(form) => this.userForm = form}>
 </UserForm>

wrappedComponentRefrefにVueの同等なので、this.userformそのDOMノード

• データを取得します
  this.userForm.props.form.getFieldsValue()
• データのリセット
  this.userForm.props.resetFields()

ドキュメントを参照してくださいantd

3.フォーム検証

基本的な使い方

<Form.Item key="author">
{getFieldDecorator("author", { rules: [{ required: true, message: '请输入作者!' }] })
(<Input placeholder="作者" allowClear />)}
</Form.Item>

カスタム検証

checkPhone = (rule, value, callback) => {
    let reg = /^1(3|4|5|7|8)\d{9}$/;
    if (!value) {
      callback("请输入手机号")
    }
    else if (!reg.test(value)) { callback("请输入正确的手机号格式") }
    else {
      callback()
    }
}
...
<Form.Item key="phone">
{getFieldDecorator("phone", { rules: [{ validator: this.checkPhone }], })
(<Input placeholder="手机号" allowClear />)}
</Form.Item>