React:Antd中Form + Upload 使用

使用

初学者开始可能会不清楚 Form.Item(需要设置 name 属性) 怎么获取子节点的值,这里说明一下:

  • Form.Item 从子节点的 value 属性值获取,例子:input
  • Form.Item 设置了 getValuePropsvaluePropName 属性,比如设置了 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 来动态改变表单值。

posted @ 2021-01-13 17:02  Feng1024  阅读(4800)  评论(0编辑  收藏  举报