antd forms如何与react一起工作？
antd forms如何与react一起工作？
提问于 2018-08-20 08:12:04
根据我对react的理解，它保持窗体所在位置的状态，当状态发生变化时，此状态用于重新呈现窗体。每当用户更改表单输入时，onchange通知将首先修改状态。到目前一切尚好。
我正在尝试理解，当antd与react一起使用时，它是如何改变状态控制流的。关于antd的文档含糊不清，其状态变化背后的原理也没有得到充分的解释。
因此，我们所拥有的是一个fieldDecorator，它可以有效地将字段转换为react/antd控制的组件。我的问题是，一旦控件在antd中更改，它将在何处保持状态？因为可能涉及多个react组件，以及如何找出哪个组件持有该状态。
我正在尝试在多个页面上使用多步骤表单，如果不了解antd是如何做到这一点的，就很难设计这个多步骤组件。对于antd人员来说，如何准确地与react机制交互，以及这些机制如何被getFieldDecorator取代，这将是很好的回应。
Stack Overflow用户
回答已采纳
发布于 2018-08-24 21:36:37
状态存储在窗体组件的本地。您不能访问内部状态存储。要构建多组件向导，您需要将状态提取到您自己的存储中(通过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)
)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51922788
复制相关文章
相似问题
腾讯云开发者
