redux 获取输入文本值

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 组件使用了一个通过 redux 设置的 prop，名为“session.Authenticated”。如果用户会话未通过身份验证，我会提供几个input 字段（一个用于用户名，另一个用于密码）和一个Login 按钮。如果我按下Login 按钮，我想发出一个带有用户名和密码值的操作，作为参数传递。现在，如何获取参数的两个input 字段的值？

IOW，我想用两个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});
  }
}