mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
84 lines
2.0 KiB
Markdown
84 lines
2.0 KiB
Markdown
---
|
|
order: 11
|
|
title:
|
|
zh-CN: 表单联动
|
|
en-US: Coordinated Controls
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
使用 `setFieldsValue` 来动态设置其他控件的值。
|
|
|
|
## en-US
|
|
|
|
Use `setFieldsValue` to set other control's value programmaticly.
|
|
|
|
````jsx
|
|
import { Form, Select, Input, Button } from 'antd';
|
|
const FormItem = Form.Item;
|
|
const Option = Select.Option;
|
|
|
|
class App extends React.Component {
|
|
handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
this.props.form.validateFields((err, values) => {
|
|
if (!err) {
|
|
console.log('Received values of form: ', values);
|
|
}
|
|
});
|
|
}
|
|
handleSelectChange = (value) => {
|
|
console.log(value);
|
|
this.props.form.setFieldsValue({
|
|
note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
|
|
});
|
|
}
|
|
render() {
|
|
const { getFieldDecorator } = this.props.form;
|
|
return (
|
|
<Form onSubmit={this.handleSubmit}>
|
|
<FormItem
|
|
label="Note"
|
|
labelCol={{ span: 5 }}
|
|
wrapperCol={{ span: 12 }}
|
|
>
|
|
{getFieldDecorator('note', {
|
|
rules: [{ required: true, message: 'Please input your note!' }],
|
|
})(
|
|
<Input />
|
|
)}
|
|
</FormItem>
|
|
<FormItem
|
|
label="Gender"
|
|
labelCol={{ span: 5 }}
|
|
wrapperCol={{ span: 12 }}
|
|
>
|
|
{getFieldDecorator('gender', {
|
|
rules: [{ required: true, message: 'Please select your gender!' }],
|
|
})(
|
|
<Select
|
|
placeholder="Select a option and change input text above"
|
|
onChange={this.handleSelectChange}
|
|
>
|
|
<Option value="male">male</Option>
|
|
<Option value="female">female</Option>
|
|
</Select>
|
|
)}
|
|
</FormItem>
|
|
<FormItem
|
|
wrapperCol={{ span: 12, offset: 5 }}
|
|
>
|
|
<Button type="primary" htmlType="submit">
|
|
Submit
|
|
</Button>
|
|
</FormItem>
|
|
</Form>
|
|
);
|
|
}
|
|
}
|
|
|
|
const WrappedApp = Form.create()(App);
|
|
|
|
ReactDOM.render(<WrappedApp />, mountNode);
|
|
````
|