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

Question

I'm using React with express to render the views of my project server-side but I came across a problem.

I have a component where the users go after loging in for the first time. There are two inputs to write the user's new password and to confirm it. I'm trying to validate that the password entered is 8 characters long at least and that the value of both inputs is the same.

React doesn't seems to update the component state and thus, my verification process doesn't work. Am I doing something wrong? Here's the code:

set-password.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>
    )
  }

});

I'm using checkLength() on the first input to verify the password length. Then checkPassword() verifies that both inputs have the same code and then update this.state.sPassword to be the first input value, which will be sent to the system endpoint.

After the SubmitButton component I'm printing the value of this.state.sPassword to see if the state is changing, but it does not. Can you help me? Thanks.

Answer 1

Your issue is that you are not setting the value of sPassword properly from its own input, the only thing you are doing is setting it when the other input changes. Additionally, that code:

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

is redundant because you are setting sPassword to the same value it already has, assuming the true case passes. Basically you are saying if '123' == password then set password to '123' . Furthermore, that case will never happen because sPassword never gets updated from its own input and thus is always an empty string.

What you need to do is, instead of calling checkLength() in first inputs onChange , you call something like updateSPassword() to properly set the password. Further more you can do the same for the second input. Finally you can add a validate method that is called when either of the passwords change and that performs your validation:

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}
    />
  }

});

Or you can even combine the setting of passwords and validation into a single method:

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
  });
}