javascript - 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 设置的名为“session.Authenticated”的 prop。如果用户 session 未经身份验证，我会显示几个输入字段(一个用于用户名，另一个用于密码)和一个登录按钮。如果我按下 Login 按钮，我想发出一个带有用户名和密码值的操作，并作为参数传递。现在，如何获取参数的两个输入字段的值？

IOW，我想用两个输入字段的值删除上面代码中硬编码的“admin，password”。如何实现这一目标？

所有示例都指向 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});
  }
}