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}); 
    } 
}