Question

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

我试图了解当antd与react一起使用时，antd如何改变这种状态控制流程。有关antd的文档含糊不清，对其状态更改背后的哲学没有足够的解释。

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

我试图在多个页面上采用多步骤形式，并且不了解antd的工作方式，很难设计此多步骤组件。对于蚂蚁们来说，它应该如何准确地与反应机制相互作用，以及如何由getFieldDecorator取代它们，将是一个很好的选择。

Answer 1

状态存储在Form组件的本地。您无法获得内部状态存储。要构建多组件向导，您需要将状态提取到自己的存储中（通过onFieldsChange属性）。如果您需要向导在用户前进/后退时保持状态不变，请使用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表单如何与之互动？

1 个答案: