antd 表单如何与 React 一起工作？

Question

根据我对 React 的理解，它会保持表单所在的状态，并且每当状态发现自身发生变化时，都会使用此状态重新呈现表单。每当用户更改表单输入时，onchange 通知将首先修改状态。到目前为止一切顺利。

我试图了解 antd 在与 React 一起使用时如何改变这种状态控制流。 antd 的文档含糊不清，其状态变化背后的哲学也没有得到充分解释。

所以我们所拥有的是 antd 有一个 fieldDecorator，它有效地将字段转换为 react/antd 受控组件。我的问题是，一旦在 antd 中更改了控件，它会在哪里保持状态？因为可能涉及多个反应组件，以及如何找出哪个组件保持状态。

我试图在多个页面上放置一个多步骤表单，如果不了解 antd 是如何做的，就很难设计这个多步骤组件。对于 antd 的人来说，如果能就它与 react 机制的交互方式以及这些机制如何被 getFieldDecorator 取代是很好的回应。

Answer 1

State 存储在 Form 组件的本地。您无法访问内部状态存储。要构建多组件向导，您需要将状态提取到您自己的存储中（通过 onFieldsChange 属性）。如果您需要向导在用户 gow back/forward 时保持状态，您可以使用 onFieldsChange 和 mapPropsToFields.

的组合

这是我的一个表单的片段，它使用 store:

做类似的事情

class MyForm extends Component {
...
}

export default Form.create( {
    onFieldsChange: ( props, fields ) => {
        props.onChange( fields ) // Set on parent!
        let previousData = store.get( 'MyForm' ) || {}
        _forEach( fields, field => {
            previousData[ field.name ] = field.value
        } )
        store.set( 'MyForm', previousData )
    },

    mapPropsToFields: ( props ) => {
        let fields = {}
        _forEach( props.myForm /* Get from parent! */, ( info, field ) => {
            fields[ field ] = Form.createFormField( info )
        } )
        return fields
    }
} )(
        translate( [ 'common' ], { wait: true } )(MyForm)
)

antd 表单如何与 React 一起工作？

how do antd forms work with react?

forms

reactjs

antd