REDX獲取輸入文本值

Question

我有以下reactjs組件。

class Login extends Component { 

render() { 
    if (this.props.session.Authenticated) { 
     return (
      <div></div> 
     ); 
    } 
    return (
     <div> 
      <input type="text" placeholder="Username" /> 
      <input type="password" placeholder="Password" /> 
      <input 
       type="button" 
       value="Login" 
       onClick={() => this.props.LoginAction("admin", "password")} 
      /> 
     </div> 
    ); 
} 
} 

Login組件使用通過名爲「session.Authenticated」的redux設置的prop。如果用戶會話未通過身份驗證，則會顯示幾個input字段（一個用於用戶名，另一個用於密碼）和Login按鈕。如果按下Login按鈕，我想發出一個帶有用戶名和密碼值的操作，並將其作爲參數傳遞。現在，我如何獲得參數的兩個input字段的值？

IOW，我想在上面的代碼中刪除硬編碼的「admin，password」和兩個input字段的值。如何實現這一目標？

所有的例子指向redux-form這是一個新的依賴項，我不想添加。我想保持我的依賴最小化，所以在我的項目中只使用react，redux和react-redux。

Answer 1

事情是這樣的：

class Login extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      model = { 
       login: "", 
       password: "" 
      } 
     } 
    } 
    render() { 
     if (this.props.session.Authenticated) { 
     return null; 
    } 
    return (
     <div> 
      <input type="text" value={this.state.model.value.login} onChange={e => this.updateModel(e.target.value, 'login')}placeholder="Username" /> 
      <input type="password" value={this.state.model.password }onChange={e => this.updateModel(e.target.value, 'password')} placeholder="Password" /> 
      <input 
       type="button" 
       value="Login" 
       onClick={() => this.props.LoginAction(this.state.model.login, this.state.model.password)} 
      /> 
     </div> 
    ); 
} 

updateModel(value, name){ 
    var model = extend({}, this.state.model); 
    model[name] = value; 
    this.setState({model}); 
    } 
}