Javascript 反应不'；t当用户更改输入时更新组件状态

我正在使用React with express渲染project server端的视图，但遇到了一个问题

我有一个组件，用户在第一次登录后可以使用它。有两个输入用于写入用户的新密码和确认密码。我试图验证输入的密码是否至少有8个字符长，以及两个输入的值是否相同

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

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

});

module.exports=React.createClass({
getInitialState:函数（）{
返回{
垃圾邮件：“”，
有效长度：假，
有效密码：false
}
},
checkLength:函数（事件）{
var pLength=event.target.value；
正压长度>=8？
this.setState（{validLength:true}）：
this.setState（{validLength:false}）；
},
检查密码：函数（事件）{
event.target.value==this.state.sPassword？
this.setState（{validPassword:true，sPassword:event.target.value}）：
this.setState（{validPassword:false}）；
},
render:function（）{
返回(
欢迎

Contraseña verificada:{this.state.sPassword}

)
}
});

我在第一次输入时使用

checkLength（）

来验证密码长度。然后

checkPassword（）

验证两个输入是否具有相同的代码，然后将

this.state.sPassword

更新为第一个输入值，该值将发送到系统端点

---

在

SubmitButton

组件之后，我正在打印

this.state.sPassword

的值，以查看状态是否正在更改，但它没有更改。你能帮助我吗？谢谢。

您的问题是，您没有从自己的输入正确设置

sPassword

的值，您唯一要做的就是在其他输入发生变化时设置它。此外，该代码：

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

是多余的，因为您正在将

sPassword

设置为它已经具有的相同值，假设

true

大小写通过。基本上你说的是

如果'123'==password，那么将password设置为'123'

。此外，这种情况永远不会发生，因为

sPassword

永远不会从自己的输入中更新，因此始终是一个空字符串

您需要做的是，不要在第一次输入

onChange

中调用

checkLength（）

，而是调用类似

updatepassword（）的东西来正确设置密码。此外，您还可以对第二个输入执行相同的操作。最后，您可以添加一个
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
  });
}