在ant.design表单中传递对象,可以通过以下步骤实现:
下面是一个示例代码:
import React, { Component } from 'react';
import { Form, Input, Button } from 'antd';
class MyForm extends Component {
state = {
myObject: {
name: '',
age: '',
email: '',
},
};
handleSubmit = e => {
e.preventDefault();
const { myObject } = this.state;
// 处理传递的对象
console.log(myObject);
};
handleInputChange = e => {
const { name, value } = e.target;
this.setState(prevState => ({
myObject: {
...prevState.myObject,
[name]: value,
},
}));
};
render() {
const { myObject } = this.state;
return (
<Form onSubmit={this.handleSubmit}>
<Form.Item label="Name">
<Input
name="name"
value={myObject.name}
onChange={this.handleInputChange}
/>
</Form.Item>
<Form.Item label="Age">
<Input
name="age"
value={myObject.age}
onChange={this.handleInputChange}
/>
</Form.Item>
<Form.Item label="Email">
<Input
name="email"
value={myObject.email}
onChange={this.handleInputChange}
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
}
}
export default MyForm;
在这个示例中,我们创建了一个包含姓名、年龄和电子邮件的对象myObject。通过在Input组件中设置name属性,可以将输入框与myObject中的属性进行绑定。在输入框的onChange事件中,更新state中myObject对应属性的值。在handleSubmit方法中,可以获取到更新后的myObject对象,并进行相应的处理。
这里使用了ant.design的Form、Input和Button组件,你可以根据实际需求选择其他组件。更多关于ant.design表单的使用可以参考腾讯云的Ant Design表单组件介绍:https://cloud.tencent.com/developer/doc/1101
领取专属 10元无门槛券
手把手带您无忧上云