Javascript Can'；t在react输入文本字段中键入-onChange无法正常工作

我正在使用ReactJS并遵循一个创建登录页面的教程，在这个示例中，代码非常直观和通用，我试图模拟该函数以从电子邮件和密码输入中获取值，但当我编写文本时，会立即替换为空字符串

我已经读过类似的文章，发现逻辑更复杂，而不需要这样做。我想要像这样简单的东西

我尝试将ID添加到不同的组件以验证它是否有效，但我无法使其有效

代码如下：

class LoginLayout extends Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: ""
    };
  }
  onUserLogin() {
    if (this.state.email !== "" && this.state.password !== "") {
      this.props.loginUser(this.state, this.props.history);
    }
  }
  handleChange = event => {
    this.setState({
      [event.target.id]: event.target.value
    });
  }
  render() {
    return (
      <Fragment>
        <Form>
          <Label className="form-group has-float-label mb-4" id="inputEmail">
            <Input type="email"
              value={this.state.email}
              onChange={this.handleChange}
            />
          </Label>
          <Label className="form-group has-float-label mb-4">
            <Input type="password" id="inputPassword"
              value={this.state.password}
              onChange={this.handleChange}
            />
          </Label>
          <div className="d-flex justify-content-between align-items-center">
            <NavLink to={`/forgot-password`}>
              <IntlMessages id="user.forgot-password-question" />
            </NavLink>
            <Button
              color="primary"
              className="btn-shadow"
              size="lg"
              onClick={() => this.onUserLogin()}
            >
              <IntlMessages id="user.login-button" />
            </Button>
          </div>
        </Form>
      </Fragment>
    );
  }
}
const mapStateToProps = ({ authUser }) => {
  const { user, loading } = authUser;
  return { user, loading };
};

export default connect(
  mapStateToProps,
  {
    loginUser
  }
)(LoginLayout);

类登录布局扩展组件{
建造师（道具）{
超级（道具）；
此.state={
电邮：“，
密码：“
};
}
onUserLogin（）{
if（this.state.email！==“”&this.state.password！==“”）{
this.props.logiuser（this.state，this.props.history）；
}
}
handleChange=事件=>{
这是我的国家({
[event.target.id]：event.target.value
});
}
render（）{
返回(
this.onUserLogin（）}
>
);
}
}
常量mapStateToProps=（{authUser}）=>{
const{user，load}=authUser；
返回{user，loading}；
};
导出默认连接(
MapStateTops，
{
登录用户
}
)（登录布局）；

在您的电子邮件输入中添加一个值为“email”的

id

属性，并将id值“inputPassword”更改为“password”

这是为了

[event.target.id]

动态属性键解析更改处理程序中的值与组件状态结构的“email”和“password”属性名匹配

否则，当前将设置inputPassword而不是password的状态，但将inputs受控值属性指向password，因为不匹配，该属性未被更新。此外，电子邮件没有visible id属性，因此在

event.target.id

中，该属性将被评估为未定义

---

希望这有帮助

就更改处理程序而言，您认为event.target.id解析为什么？这与您指向该输入的值以及该组件上的状态属性名称相比如何？我发现问题在于输入的id是password，但值仅指向password。尝试将该输入的id更改为密码，并实际将电子邮件输入的id添加到电子邮件中，以匹配您的初始状态。谢谢，我是新手，购买了一个模板，仅对其进行修改。我真的很喜欢像我尝试复制的演示一样简单的东西。你救了我的命，很乐意帮忙。快乐编码！