Skip to content

GitLab

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
T treasure
  • Project overview
    • Project overview
    • Details
    • Activity
    • Releases
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 13
    • Issues 13
    • List
    • Boards
    • Labels
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Operations
    • Operations
    • Incidents
    • Environments
  • Packages & Registries
    • Packages & Registries
    • Container Registry
  • Analytics
    • Analytics
    • CI/CD
    • Repository
    • Value Stream
  • Wiki
    • Wiki
  • External wiki
    • External wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • FE
  • treasure
  • Issues
  • #42

Closed
Open
Created Aug 26, 2021 by xingkai@kevin

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 来动态改变表单值。
Edited Aug 26, 2021 by xingkai
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking