我有以下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。
最佳答案
类似这样的事情:
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});
}
}
关于javascript - redux 获取输入文本值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40521333/