输入字段不起作用

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