Reactjs React中一个输入表单中的两个字段

我有一个简单的react应用程序，有两个字段——一个用于电子邮件，一个用于密码。当前，当我在电子邮件字段中键入内容时，密码字段也会被填充。我想把这些字段分开，当用户键入email和password并点击“login”时，他应该看到这两个值，目前他看到一个。以下是我的代码片段：

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('email: ' + this.state.value);
    alert('password: + ?');
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          email:
          <input type="text" name="email" value={this.state.value} onChange={this.handleChange} />
        </label>
        <label>
          password:
          <input type="password" name="password" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Login" />
      </form>
    );
  }

}

export default App;

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
handleSubmit（事件）{
警报（“电子邮件：”+this.state.value）；
警报（'密码：+？'）；
event.preventDefault（）；
}
render（）{
返回(
电邮：
密码：
);
}
}
导出默认应用程序；

---

你有什么提示我的代码有什么问题吗？谢谢

在这段代码中，您试图为两个字段设置相同的状态，这就是为什么您会得到相同的值。您应该为两个字段设置两个单独的状态值

import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {email: '',password: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert('email: ' + this.state.email);
    alert('password: + ?');
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          email:
          <input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
        </label>
        <label>
          password:
          <input type="password" name="password" value={this.state.password} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Login" />
      </form>
    );
  }

}

export default App;

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={电子邮件：''，密码：'}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
handleSubmit（事件）{
警报（“电子邮件：”+this.state.email）；
警报（'密码：+？'）；
event.preventDefault（）；
}
render（）{
返回(
电邮：
密码：
);
}
}
导出默认应用程序；

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}；
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（活动）{
this.setState（{[event.target.name]：event.target.value}）；
}
handleSubmit（事件）{
警报（“电子邮件：”+this.state.email）；
警报（'密码：+this.state.password）；
event.preventDefault（）；
}
render（）{
返回(
电邮：
this.handleChange（e）}/>
密码：
this.handleChange（e）}/>
);
}
}
导出默认应用程序；

---

您正在将这两种状态都赋值，因此看不出有什么区别。

您需要添加两种状态，一种用于电子邮件，另一种用于密码，然后您可以在handleChange功能上执行类似操作：

constructor(props) {
 super(props);
 this.state = {email: '', password: ''};

 this.handleChange = this.handleChange.bind(this);
 this.handleSubmit = this.handleSubmit.bind(this);
}

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

之后，您只需更改输入字段以使用该状态：

<input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
<input type="password" name="password" value={this.state.password} onChange={this.handleChange} />

<input type="text" name="email" value={this.state.email} onChange={this.handleChange} />
<input type="password" name="password" value={this.state.password} onChange={this.handleChange} />