javascript - 当用户更改输入时，React 不会更新组件状态

Question

我正在使用 React 和express 来渲染我的项目服务器端的 View ，但我遇到了一个问题。

我有一个组件，用户第一次登录后会进入该组件。有两个输入用于写入用户的新密码并进行确认。我正在尝试验证输入的密码是否至少有 8 个字符长，并且两个输入的值是否相同。

React 似乎没有更新组件状态，因此我的验证过程不起作用。难道我做错了什么？代码如下:

设置密码.jsx

module.exports = React.createClass({

  getInitialState: function() {
    return { 
      sPassword: '',
      validLength: false,
      validPassword: false
    }
  },

  checkLength: function(event) {
    var pLength = event.target.value;
    pLength.length >= 8 ? 
      this.setState({ validLength: true }) : 
      this.setState({ validLength: false });
  },

  checkPassword: function(event) {
    event.target.value === this.state.sPassword ? 
      this.setState({ validPassword: true, sPassword: event.target.value}) :
      this.setState({ validPassword: false });
  },

  render: function() {
    return (
      <Layout>
        <Form action='/auth/setpassword' method='POST' name='setPassword'>
          <h1>Welcome</h1>
          <p>...</p>
          <div className='row'>
            <div className='col-sm-6'>
              <Input 
                type='password' 
                label='Introduzca su nueva contraseña' 
                name='password' 
                onChange={this.checkLength}
                value={this.state.sPassword}
              />
            </div>
            <div className='col-sm-6'>
              <Input 
                type='password' 
                label='Escriba de nuevo su contraseña' 
                name='confirm_password'
                onChange={this.checkPassword}
              />
            </div>
          </div>
          <SubmitButton value='Guardar nueva contraseña' />
            <div>
              <p>Contraseña verificada: <span>{this.state.sPassword}</span></p>
            </div>
        </Form>
      </Layout>
    )
  }

});

我在第一个输入上使用 checkLength() 来验证密码长度。然后 checkPassword() 验证两个输入是否具有相同的代码，然后将 this.state.sPassword 更新为第一个输入值，该值将发送到系统端点。

在 SubmitButton 组件之后，我打印 this.state.sPassword 的值以查看状态是否正在更改，但事实并非如此。你能帮助我吗？谢谢。

Answer 1

您的问题是您没有根据自己的输入正确设置 sPassword 的值，您唯一要做的就是在其他输入更改时设置它。此外，该代码:

checkPassword: function(event) {
  event.target.value === this.state.sPassword ? 
    this.setState({ validPassword: true, sPassword: event.target.value}) :
    this.setState({ validPassword: false });
},

是多余的，因为假设 true 案例通过，您将 sPassword 设置为已有的相同值。基本上你是在说if '123' == password then setpassword to '123'。此外，这种情况永远不会发生，因为 sPassword 永远不会从自己的输入中更新，因此始终是一个空字符串。

您需要做的是，不要在第一个输入 onChange 中调用 checkLength()，而是调用 updateSPassword() 来正确设置密码。此外，您可以对第二个输入执行相同的操作。最后，您可以添加一个 validate 方法，该方法在任一密码更改时调用并执行验证:

module.exports = React.createClass({

  getInitialState: function() {
    return { 
      sPassword: '',
      cPassword: '',
      validLength: false,
      validPassword: false
    }
  },

  setSPasswordAndValidate: function(e) {
    this.setState({
      sPassword: e.target.value
    });
    this.validate();
  },

  setCPasswordAndValidate: function(e) {
    this.setState({
      cPassword: e.target.value
    });
    this.validate();
  },

  validate: function() {
    var pw1 = this.state.sPassword;
    var pw2 = this.state.cPassword;

    var validPassword = pw1 === pw2;
    var validLength = validPassword && pw1.length >= 8;

    this.setState({
      validPassword: validPassword,
      validLength: validLength
    });
  }

  render: function() {

    // ...

    <Input 
      type='password' 
      label='Introduzca su nueva contraseña' 
      name='password' 
      onChange={this.setSPasswordAndValidate}
      value={this.state.sPassword}
    />
    // ...
    <Input 
      type='password' 
      label='Escriba de nuevo su contraseña' 
      name='confirm_password'
      onChange={this.setCPasswordAndValidate}
      value={this.state.cPassword}
    />
  }

});

或者您甚至可以将密码设置和验证合并到一个方法中:

setSPasswordAndValidate: function(e) {
  this.validate(e.target.value, this.state.cPassword);
},

setCPasswordAndValidate: function(e) {
  this.validate(this.state.sPassword, e.target.value);
},

validate: function(sPassword, cPassword) {

  var validPassword = sPassword === cPassword;
  var validLength = validPassword && sPassword.length >= 8;

  this.setState({
    sPassword: sPassword,
    cPassword: cPassword,
    validPassword: validPassword,
    validLength: validLength
  });
}