关于前端:AntDesignPro-40探索之Form表单的双向绑定

前言:在AntDesignPro3.23.6版本中,form表单绑定值是应用的getFieldDecorator办法赋值配合validateFields办法取值达到双向绑定的成果.那在AntDesignPro 4.0版本中如何赋值取值呢?

AntDesignPro3.23.6版本示例:

// 赋值 <Form      labelCol={{ span: 6 }}    wrapperCol={{ span: 14 }}    onSubmit={this.handleSubmit}  >    <Form.Item>      {getFieldDecorator('money',{          rules=[{               required: true,              message: '请输出金额',            }],      })(          <InputNumber            min={0}            onChange={value => console.log(value) })}            placeholder="请输出金额"           />        )}    </Form.Item>  </Form>// 取值handleSubmit () =>{    this.props.form.validateFields((err, values) => {          if (!err) {            // 这样就拿到了输出的金额            const money = values.money          }    })}

AntDesignPro4.0版本示例:

// 赋值 <Form      labelCol={{ span: 6 }}    wrapperCol={{ span: 14 }}    onSubmit={this.handleSubmit}  >    <Form.Item      label="金额"      name="money"      rules={[        {          required: true,          message: '请输出金额',        },      ]}    >      <InputNumber        min={0}        onChange={value => console.log(value) })}        placeholder="请输出金额"       />    </Form.Item>  </Form>// 取值handleSubmit () =>{  const { validateFields } = form;  const onValidateForm = async () => {        const values = await validateFields();         // 这样就拿到了输出的金额        const money = values.money  }}

总结:
3.23.6版本:
赋值:getFieldDecorator办法.
取值:validateFields办法.
校验:rules在getFieldDecorator办法内.

4.0版本:
赋值:Form.Item的name属性间接赋值.
取值:validateFields办法.
校验:Form.Item的rules属性间接校验.