Ant Design：Form表单组件的正确使用

Form

设置表单初始默认值 initialValues （只在初始化和重置表单时生效) | Object
表单字段状态发生改变触发的回调函数 onValuesChange | function(changedValues,allValues)

Form.Item

为子组件的字段设置字段名 name | String

          <Form
            initialValues={{
							name:`小明`//为字段名为name的表单项设置初始值为小明	
						}}
            onValuesChange={(changedValues, allValues) => {
              console.log(allValues);
            }}
          >
             <Form.Item
              label={`姓名`}
              name={`name`}//为子组件添加字段名
							>
                <Input />//这时此输入框的默认值为小明
             </Form.Item>
          </Form>

场景1：添加

在添加的表单中，默认值一般都为空，或者是真假状态的，所以说为Form的 initialValues 属性内的表单项的字段名称对应的值设为空的字符串，或者false默认的radio单选初始值即可。

接着使用一个状态在 onValuesChange 事件中拿到最新的整个表单数据：

       <Form
            initialValues={{
							name:`小明`//为字段名为name的表单项设置初始值为小明	
						}}
            onValuesChange={(changedValues, allValues) => {
              console.log(allValues);//changedValues为当前在发生变化的字段项，
							setFormObj(allValues);//allValues为整个最新的状态的表单对象
            }}
          >
             <Form.Item
              label={`姓名`}
              name={`name`}//为子组件添加字段名
							>
                <Input />//这时此输入框的默认值为小明
             </Form.Item>
          </Form>

changedValues为当前在发生变化的字段项
allValues为整个最新的状态的表单对象
现在setFormObj为最新的整个表单对象，那么在提交表单的时候可直接拿来当做请求体的值来发送；

场景2：编辑

编辑与添加大致相同
编辑时的初始值为当前编辑项，所以直接可直接将当前编辑项的整个对象数据放入initialValues属性中当做值即可。
在打开编辑时显示的自然是当前编辑的这项的所有状态，接着还是在 onValuesChange 中使用一个状态拿到最新的更改后的数据提交编辑即可。