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，名为＆＃34; session.Authenticated＆＃34;。如果用户会话未经过身份验证，我会显示几个input字段（一个用于用户名，另一个用于密码）和一个Login按钮。如果我按下Login按钮，我想发出一个带有用户名和密码值的动作，作为参数传递。现在，如何获取参数的两个input字段的值？

IOW，我想删除硬编码的＆＃34; admin，密码＆＃34;在上面的代码中包含两个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});
  }
}

redux获取输入文本值

1 个答案: