React:Antd中Form + Upload 使用
使用
初学者开始可能会不清楚 Form.Item(需要设置 name 属性) 怎么获取子节点的值,这里说明一下:
- Form.Item 从子节点的
value
属性值获取,例子:input - Form.Item 设置了
getValueProps
或valuePropName
属性,比如设置了valuePropName
={'checked'} ,则会从子节点的 checked 属性中去获取,例子:Switch - 如果子节点没有
value
属性,而且从其他属性也无法获取到需要发送给后端的值,怎么办?通过onChange
方法,或trigger
属性指定的名称方法。由于 Form.Item 会自动向子节点传入 props :value
属性(或valuePropName
指定的其他属性),onChange
方法(或 trigger 指定的其他名称)。所以可以在子节点调用 props.onChange(value) 方法来传递 value 值。onChange 传入的参数即该 Form.Item 会向后端发送的值。
官方说明
被设置了 name
属性的 Form.Item 包装的控件,表单控件会自动添加 value
(或 valuePropName
指定的其他属性) onChange
(或 trigger 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
-
你不再需要也不应该用 onChange 来做数据收集同步(你可以使用 Form 的 onValuesChange),但还是可以继续监听 onChange 事件。
-
你不能用控件的 value 或 defaultValue 等属性来设置表单域的值,默认值可以用 Form 里的 initialValues 来设置。注意 initialValues 不能被 setState 动态更新,你需要用 setFieldsValue 来更新。
-
你不应该用 setState,可以使用 form.setFieldsValue 来动态改变表单值。