类组件antd form中拿到了input框和select的onchange内容,怎么拼接展示到最后一个input框中
时间: 2024-04-13 16:29:28 浏览: 198
您可以在Ant Design的Form组件中使用`getFieldDecorator`方法,并通过监听输入框和选择框的`onChange`事件来获取其值,然后将这些值拼接展示到最后一个输入框中。下面是一个示例代码:
```jsx
import { Form, Input, Select } from 'antd';
const { Option } = Select;
class MyForm extends React.Component {
state = {
concatenatedValue: '', // 拼接后的值
};
handleInputChange = (e) => {
const { value } = e.target;
this.setState({
concatenatedValue: value, // 更新拼接后的值
});
};
handleSelectChange = (value) => {
this.setState({
concatenatedValue: value, // 更新拼接后的值
});
};
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
const { field1, field2, field3, field4 } = values;
const concatenatedValue = `${field1}${field2}${field3}${field4}`;
this.setState({
concatenatedValue, // 更新拼接后的值
});
}
});
};
render() {
const { getFieldDecorator } = this.props.form;
const { concatenatedValue } = this.state;
return (
<Form onSubmit={this.handleSubmit}>
<Form.Item>
{getFieldDecorator('field1')(<Input placeholder="输入框1" onChange={this.handleInputChange} />)}
</Form.Item>
<Form.Item>
{getFieldDecorator('field2')(<Input placeholder="输入框2" onChange={this.handleInputChange} />)}
</Form.Item>
<Form.Item>
{getFieldDecorator('field3')(<Select placeholder="选择框" onChange={this.handleSelectChange} />)}
</Form.Item>
<Form.Item>
{getFieldDecorator('field4')(<Input placeholder="输入框3" onChange={this.handleInputChange} />)}
</Form.Item>
<Form.Item>
<Input value={concatenatedValue} disabled />
</Form.Item>
</Form>
);
}
}
const WrappedMyForm = Form.create()(MyForm);
```
在上面的代码中,我们使用`handleInputChange`和`handleSelectChange`方法来分别处理输入框和选择框的`onChange`事件,从而更新拼接后的值。在`handleSubmit`方法中,我们通过`this.props.form.validateFields`获取了所有字段的值,并将它们拼接到`concatenatedValue`变量中。最后,在最后一个输入框中,我们通过设置`value={concatenatedValue}`将拼接后的值展示出来。
请注意,上述代码仅为示例,您可能需要根据自己的具体需求进行适当的修改和调整。
阅读全文