antd4.x Form组建改变

// antd v3
function Demo (props)(
  const { form } = props
  const { getFieldDecorator, getFieldsValue, setFieldsValue } = form
  return (
     <Form>
      <Form.Item>
        {getFieldDecorator('username', {
          rules: [{ required: true }],
        })(<Input />)}
      </Form.Item>
    </Form>
  )
); export default Form.create()(Demo);

 

// antd v4
function Demo (props)(
  const [form] = Form.useForm()
  const { getFieldDecorator, getFieldsValue, setFieldsValue } = form

  retunr (
    <Form>
      <Form.Item name="username" label="usesrname" rules={[{required: true}]}>
        <Input/>
      </Form.Item>
    </Form>
  )

);
 
export default Demo;

  antd4.x移除了 Form.create(),原本的 onFieldsChange 等方法移入 Form 中,通过 fields 对 Form 进行控制

posted @ 2020-10-12 15:32  Mr_R  阅读(415)  评论(0编辑  收藏  举报