我有一个供用户使用的表,我想通过单击“添加”按钮将多个用户添加到该表中。我无法理解onChangeHandler和onSubmit函数应该是什么样子!
就我的理解而言,只能通过将id / index传递给函数来完成。我尝试过但是我做错了什么
class Component extends React.Component {
constructor(props) {
super(props);
this.state = {
id: '',
lastname: '',
firstname: '',
email: ''
};
this.state.displayRow = [
{
name: ''
}
];
this.handleChange = this.handleChange.bind(this);
this.insertRow = this.insertRow.bind(this);
}
handleChange(e) {
console.log(e.target.value);
this.setState({ [e.target.name]: e.target.value });
}
insertRow(user) {
var id = (+new Date() + Math.floor(Math.random() * 999999)).toString(36);
this.setState({
displayRow: [
...this.state.displayRow,
{
id: id,
nuid: '',
lastname: '',
firstname: '',
email: ''
}
]
});
}
render() {
return (
<Table responsive className="table_main">
<thead>
<tr className="user-table-row">
<th>ID</th>
<th>Last Name</th>
<th>First Name</th>
</tr>
</thead>
<tbody>
<tr id="table">
<td key={idx}>
<input
key={idx}
type="text"
id="id"
name="id"
value={item.id}
onChange={this.handleChange(idx)}
/>
</td>
<td>
<input
key={idx}
type="text"
id="lastname"
name="lastname"
value={item.lastname}
onChange={this.handleChange}
/>
</td>
<td>
<input
key={idx}
type="text"
id="firstname"
name="firstname"
value={item.firstname}
onChange={this.handleChange}
/>
</td>
</tr>
<td>
<Button
className="additional-add-btn"
style={style}
variant="contained"
onClick={() => {
this.insertRow();
}}
>
+ Additional User
</Button>
</td>
</tbody>
</Table>
);
}
}