入力フィールドが機能していません

Question

フィールドの値としてstate変数を使用すると、2番目のinputフィールドは機能しません。

<input 
    type="text" 
    className="form-control" 
    placeholder="mobileNumber" 
    onChange={this.handleLoginMobileNumber} 
    onKeyUp={this.handleLoginMobileNumber} 
    value={this.state.loginMobileNumber} 
/> 

<input 
    type="text" 
    className="form-control" 
    placeholder="Passcode" 
    maxLength="4" 
    value={this.state.loginPasscode} 
/> 
<br/> 
<button 
    className="btn btn-large btn-primary medata-login-form-input medata-login-form-submit-button" 
    onClick={this.submitLogin}> 
    Log in 
</button> 

が私を助けて、ありがとう：ここ

はコードです。

Answer 1

問題は、あなたがControlled Componentを使用していて、そのせいでパスワードフィールドのだけを読んで、onChange方法を定義し、パスワードフィールドでstate値を更新するのを忘れ、です。

チェックこの例：

class App extends React.Component{ 
 
    constructor(){ 
 
    super(); 
 
    this.state = { 
 
      loginMobileNumber: '', 
 
      loginPasscode: '' 
 
    } 
 
    } 
 
    
 
    handleLoginMobileNumber(e){ 
 
    this.setState({loginMobileNumber: e.target.value}) 
 
    } 
 
    
 
    loginPasscode(e){ 
 
    this.setState({loginPasscode: e.target.password}) 
 
    } 
 
    
 
    render(){ 
 
     return(
 
     <div> 
 
      <input 
 
       type="text" 
 
       className="form-control" 
 
       placeholder="mobileNumber" 
 
       onChange={this.handleLoginMobileNumber.bind(this)} 
 
       value={this.state.loginMobileNumber} 
 
      /> 
 

 
      <input 
 
       type="password" 
 
       className="form-control" 
 
       placeholder="Passcode" 
 
       maxLength="4" 
 
       value={this.state.loginPasscode} 
 
       onChange={this.loginPasscode.bind(this)} 
 
      /> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id='app'/>