in reactjsボタンを持っていて、ユーザーがログインしているようにしています

Question

私はreactjsにはかなり新しく、 "私をサインインしてください"チェックボックスを使ってフォームを追加しようとしています。これまでのところ私の設定ですが、望みの結果が得られません。助けていただければ幸いです。ありがとう

 <Input 
      type="email" 
      name="email" 
      value={this.state.signInForm.email} 
      placeholder="Email" 
      onChange={this.handleSigninChange} /> 

     <Input 
      type="password" 
      name="password" 
      value={this.state.signInForm.password} 
      placeholder="Password" 
      onChange={this.handleSigninChange} /> 

     <Input 
      type="checkbox" 
      name="save_login_state" 
      label="Keep me signed in" 
      checked={false} 
      onChange={this.handleLoggedInState.bind(this)} /> 

     handleLoggedInState: function() { 
     this.state.signInForm.email = true; 
      }, 

私の滞在は、この時点では何もしていません。それは私にそれをチェックさせることさえできません。

Answer 1

私は状態変数の値を設定している方法が適切ではないと思います。チェックボックスの状態を維持するために状態変数を使用すると、入力フィールドにが使用されています。iあなたは）デフォルトの入力要素を使用している、これを試してみてください。

handleLoggedInState: function() { 
    this.setState({checkboxValue: !this.state.checkboxValue}); 
}, 

<input 
     type="checkbox" 
     name="save_login_state" 
     label="Keep me signed in" 
     checked={this.state.checkboxValue} 
     onChange={this.handleLoggedInState.bind(this)} /> 

取り組ん例えばjsFiddleを確認してください：あなたの例ではhttps://jsfiddle.net/xep3mskr/

Answer 2

問題は、falseにあるチェックボックスの値をハードコーディングしたことです。これを代わりに試してみてください：

<input 
    type="checkbox" 
    name="save_login_state" 
    label="Keep me signed in" 
    checked={this.state.saveLoginState} 
    onChange={this.toggleLoginState.bind(this)} 
/> 

    toggleLoginState: function() { 
     this.setState({saveLoginState: !this.state.saveLoginState}); 
    } 

また、常に関数をコンストラクタにバインドする必要があります。

例えば

constructor(props) { 
    super(props); 
    // bind your component functions in the constructor 
    this.toggleLoginState = this.toggleLoginState.bind(this); 
}