reactjs中的输入同时填写

Question

您好，基本上，我的问题是同时填写表格上的输入。当我在名字输入上写东西时，会同时写上姓氏，电子邮件和电话输入，但我希望它们分开工作。我认为handleChange可能是一个问题，我一直在尝试不同的方法，但是它们都不起作用

这是我的代码：

standard-object

Answer 1

所有输入都在同时更改，因为对于该状态下的所有输入，您只保留一个value。首先为每个输入保留不同的输入：

this.state = {
    fname: "",
    lname: "",
    email: "",
    phone: "",
};

然后，为您的name中的每一个给一个FormControl：

<FormControl
    type="text"
    name="fname"
    value={this.state.fname}
    placeholder="First Name"
    onChange={this.handleChange}
/>

在这里，也将value更改为this.state.fname（根据此命名其他名称），并将onChange更改为handleChange。我们正在为所有输入编写一个handleChange方法。在这里：

handleChange = ( event ) => {
   const { name, value } = event.target;
   this.setState({ [name]: value });
}