Question

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

我已经看过类似的文章，发现逻辑不需要那么复杂。我想要一个像这个 DEMO 一样简单的东西。

我尝试将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);

Answer 1

在电子邮件输入中添加值为“ email”的id属性，并将id值“ inputPassword”更改为“ password”。

这是为了使[event.target.id]动态属性键解析更改处理程序中的值，使其与组件状态结构的“电子邮件”和“密码”的属性名称匹配。

否则，当前您正在设置inputPassword的状态而不是密码，但是将输入的控制值属性指向由于不匹配而无法更新的密码。另外，电子邮件没有可见的id属性，因此根据event.target.id的评估结果为未定义。

希望有帮助！

无法输入反应输入文本字段-onChange无法正常工作

1 个答案: