mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-05 17:59:57 +08:00
2.3 KiB
2.3 KiB
order | title | ||||
---|---|---|---|---|---|
8 |
|
zh-CN
通过使用 onFieldsChange
与 mapPropsToFields
,可以把表单的数据存储到上层组件或者 Redux、dva 中,更多可参考 rc-form 示例。
注意:mapPropsToFields
里面返回的表单域数据必须使用 Form.createFormField
包装。
en-US
We can store form data into upper component or Redux or dva by using onFieldsChange
and mapPropsToFields
, see more at this rc-form demo.
Note: You must wrap field data with Form.createFormField
in mapPropsToFields
.
import { Form, Input } from 'antd';
const FormItem = Form.Item;
const CustomizedForm = Form.create({
onFieldsChange(props, changedFields) {
props.onChange(changedFields);
},
mapPropsToFields(props) {
return {
username: Form.createFormField({
...props.username,
value: props.username.value,
}),
};
},
onValuesChange(_, values) {
console.log(values);
},
})((props) => {
const { getFieldDecorator } = props.form;
return (
<Form layout="inline">
<FormItem label="Username">
{getFieldDecorator('username', {
rules: [{ required: true, message: 'Username is required!' }],
})(<Input />)}
</FormItem>
</Form>
);
});
class Demo extends React.Component {
state = {
fields: {
username: {
value: 'benjycui',
},
},
};
handleFormChange = (changedFields) => {
this.setState(({ fields }) => ({
fields: { ...fields, ...changedFields },
}));
}
render() {
const fields = this.state.fields;
return (
<div>
<CustomizedForm {...fields} onChange={this.handleFormChange} />
<pre className="language-bash">
{JSON.stringify(fields, null, 2)}
</pre>
</div>
);
}
}
ReactDOM.render(<Demo />, mountNode);