类组件antd form中input框和select的内容都会拼接展示到最后一个input框中
时间: 2024-04-14 15:29:33 浏览: 217
在react项目中使用antd的form组件,动态设置input框的值
在Ant Design的Form组件中,您可以使用`getFieldDecorator`方法来创建输入框和选择框,并将它们的值拼接展示到最后一个输入框中。下面是一个示例代码:
```jsx
import { Form, Input, Select } from 'antd';
const { Option } = Select;
class MyForm extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
const { field1, field2, field3, field4 } = values;
const concatenatedValue = `${field1}${field2}${field3}${field4}`;
console.log(concatenatedValue);
// 在这里可以根据需要进行后续操作
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit}>
<Form.Item>
{getFieldDecorator('field1')(<Input placeholder="输入框1" />)}
</Form.Item>
<Form.Item>
{getFieldDecorator('field2')(<Input placeholder="输入框2" />)}
</Form.Item>
<Form.Item>
{getFieldDecorator('field3')(<Select placeholder="选择框" />)}
</Form.Item>
<Form.Item>
{getFieldDecorator('field4')(<Input placeholder="输入框3" />)}
</Form.Item>
<Form.Item>
<Input value={concatenatedValue} disabled />
</Form.Item>
</Form>
);
}
}
const WrappedMyForm = Form.create()(MyForm);
```
在上面的代码中,我们通过`getFieldDecorator`方法为每个输入框和选择框创建了一个装饰器。在`handleSubmit`方法中,我们通过`this.props.form.validateFields`获取了所有字段的值,并将它们拼接到`concatenatedValue`变量中。最后,在最后一个输入框中,我们通过设置`value={concatenatedValue}`将拼接后的值展示出来。
请注意,上述代码仅为示例,您可能需要根据自己的具体需求进行适当的修改和调整。
阅读全文