输入字段不能正常工作

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