Javascript redux获取输入文本值

我有以下组件

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

类登录扩展组件{
render（）{
if（this.props.session.Authenticated）{
返回(
);
}
返回(
this.props.LoginAction（“admin”、“password”）}
/>
);
}
}

登录组件使用一个通过redux设置的属性，名为“session.Authenticated”。如果用户会话未通过身份验证，我将显示两个

输入

字段（一个用于用户名，另一个用于密码）和一个

登录

按钮。如果我按下

Login

按钮，我想发出一个带有用户名和密码值的操作，作为参数传递。现在，如何获取参数的两个

输入

字段的值

下面，我想删除上面代码中硬编码的“admin，password”以及两个

input

字段的值。如何做到这一点

所有示例都指向

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

类登录扩展组件{
建造师（道具）{
超级（道具）；
此.state={
型号={
登录名：“，
密码：“
}
}
}
render（）{
if（this.props.session.Authenticated）{
返回null；
}
返回(
this.updateModel（e.target.value，'login'）}占位符=“用户名”/>
this.updateModel（e.target.value，'password'）}占位符=“password”/
this.props.LoginAction（this.state.model.login，this.state.model.password）}
/>
);
}
updateModel（值、名称）{
var model=extend（{}，this.state.model）；
模型[名称]=值；
this.setState（{model}）；
}
}

我正在使用redux，因此需要全局维护状态。在redux中使用特定于组件的状态不是一种不好的做法吗？您的

updateModel

方法应该触发操作，并且操作应该更新存储值，这需要大量的样板代码，因此，尝试在一些库中搜索表单。绝对可以肯定的是，您会发现表单组件将在其内部执行所有更新魔法

form

component。但对于一个简单的动作来说，这是一个冗长的样板。有一个react表单库，但我试图最小化依赖关系。看来这是不可能的。谢谢。一年前我开始从事大型基于react的项目，并尝试了一些组件，但没有任何东西能够满足我的所有需求。最后，我为表单编写了自己的lib，对所有props.children使用React.cloneComponent，并且它需要最少的样板代码。不幸的是，在克隆子级之后，“ref”属性并没有按预期工作。但如果您感兴趣，我可以共享代码。