입력 필드가 작동하지 않습니다.

Question

state 변수를 input 필드의 값으로 사용하는 경우 두 번째 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'/>