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 中使用一个状态拿到最新的更改后的数据提交编辑即可。