Redux获取输入文本值

redux get input text value

本文关键字：文本 输入 获取 Redux      更新时间：2023-09-26

我有如下的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"的道具。如果用户会话没有经过身份验证，我将显示两个input字段(一个用于用户名，另一个用于密码)和一个Login按钮。如果我按下Login按钮，我想发出一个带有用户名和密码值的动作，作为参数传递。现在，我如何获得参数的两个input字段的值呢?

现在，我想用两个input字段的值删除上面代码中的硬编码"admin, password"。如何做到这一点?

所有的例子都指向redux-form，这是一个我不想添加的新依赖项。我想保持我的依赖最小，所以在我的项目中只使用react, redux和react-redux。

像这样:

  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});
  }
}
相关文章：