ユーザーが入力を変更したときにReactがコンポーネントの状態を更新しない

Question

私はプロジェクトのサーバー側のビューをレンダリングするためにReact with expressを使用していますが、問題が発生しました。

私は初めてログインするユーザーがいるコンポーネントがあります。ユーザーの新しいパスワードを入力して確認するための2つの入力があります。入力したパスワードが少なくとも8文字で、両方の入力の値が同じであることを確認しようとしています。

Reactはコンポーネントの状態を更新していないようで、私の検証プロセスは機能しません。私は何か間違っているのですか？

セット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> 
    ) 
    } 

}); 

私は、パスワードの長さを確認するために、最初の入力にcheckLength()を使用しています：ここではコードです。次にcheckPassword()は、両方の入力が同じコードを持っていることを確認してから、this.state.sPasswordを最初の入力値に更新し、システムエンドポイントに送信します。

SubmitButtonコンポーネントの後に、this.state.sPasswordの値を印刷して、状態が変化しているかどうかを確認していますが、変更されていません。手伝って頂けますか？ありがとう。

Answer 1

sPasswordの値を自分の入力から正しく設定していないという問題があります。唯一のことは、他の入力が変更されたときに設定することです。また、そのコード：あなたはtrue場合が通過すると仮定すると、それは既に持っている同じ値にsPasswordを設定しているので

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

は冗長です。基本的にはif '123' == password then set password to '123'と言っています。さらに、sPasswordはそれ自身の入力から決して更新されず、したがって常に空の文字列であるため、このケースは決して起こりません。

最初の入力でcheckLength()を呼び出すのではなく、updateSPassword()と呼び出すと、パスワードを正しく設定することができます。さらに2番目の入力に対しても同じことができます。

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

}); 

それとも、1つでもメソッドにパスワードと検証の設定を組み合わせることができます：

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

最後に、パスワードのいずれかが変化し、それはあなたの検証を実行したときに呼び出され validateメソッドを追加することができます