我正在使用 ReactJS 并按照教程创建登录页面，示例中的代码非常直观和通用，我正在尝试模拟该函数以从电子邮件和密码输入中获取值，但是当我写文本时，立即用空字符串替换。
我已经浏览过类似的帖子，发现逻辑更复杂而不需要它。我想要像这样简单的东西 DEMO 。
我尝试将 id 添加到不同的组件以验证它是否有效，但我无法使其有效。
这是代码:
class LoginLayout extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
onUserLogin() {
if (this.state.email !== "" && this.state.password !== "") {
this.props.loginUser(this.state, this.props.history);
}
}
handleChange = event => {
this.setState({
[event.target.id]: event.target.value
});
}
render() {
return (
<Fragment>
<Form>
<Label className="form-group has-float-label mb-4" id="inputEmail">
<Input type="email"
value={this.state.email}
onChange={this.handleChange}
/>
</Label>
<Label className="form-group has-float-label mb-4">
<Input type="password" id="inputPassword"
value={this.state.password}
onChange={this.handleChange}
/>
</Label>
<div className="d-flex justify-content-between align-items-center">
<NavLink to={`/forgot-password`}>
<IntlMessages id="user.forgot-password-question" />
</NavLink>
<Button
color="primary"
className="btn-shadow"
size="lg"
onClick={() => this.onUserLogin()}
>
<IntlMessages id="user.login-button" />
</Button>
</div>
</Form>
</Fragment>
);
}
}
const mapStateToProps = ({ authUser }) => {
const { user, loading } = authUser;
return { user, loading };
};
export default connect(
mapStateToProps,
{
loginUser
}
)(LoginLayout);
最佳答案
将值为“email”的 id 属性添加到您的电子邮件输入，并将 id 值“inputPassword”更改为“password”。
这样一来，[event.target.id] 动态属性键在您的更改处理程序中解析的值与组件状态结构的“email”和“password”属性名称相匹配。
否则当前，您正在设置 inputPassword 的状态而不是 password，但是将 inputs 控制值属性指向由于不匹配而未更新的 password。此外，电子邮件没有可见的 id 属性，因此根据 event.target.id 将评估为未定义。
希望对您有所帮助!
关于javascript - 无法输入 react 输入文本字段 - onChange 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55642591/