Reactjs 中的登录表单验证：材料 UI <textfield>

Question

我正在尝试在我的反应应用程序中进行登录表单验证。我是新手反应，我正在使用材料 UI。所以我尝试在登录名和密码字段中输入数据，但我无法输入。有人可以告诉我到底是什么问题吗？是因为我在状态中声明了数据对象吗？以下是代码：

state = {
open: false,
show: null,
dialogOpen: false,
buttonDisabled: true,
data: {
email: "",
password: ""
},
errors: {}
};

handleChange = e =>
this.setState({
data: { ...this.state.data, [e.target.name]: e.target.value }
});
onSubmit = () => {
const errors = this.validate(this.state.data);
this.setState({ errors });
};
validate = data => {
const errors = {};
if (!Validator.isEmail(data.email)) errors.email = "Invalid email";
if (!data.password) errors.password = "Can't be blank";
return errors;
};
const { data, errors } = this.state;
<Dialog open={this.state.dialogOpen} onClose={this.closeDialog} >
<DialogTitle>Login</DialogTitle>
<DialogContent>
<DialogContentText>
Please enter your Login data here
</DialogContentText>
<form onSubmit={this.onSubmit}>
<TextField
margin="dense"
id="email"
label="Email Address"
className={classes.textField}
type="email"
value={data.email}
onChange={this.handleChange}
fullWidth
/>
{errors.email && <InlineError text={errors.email} />}
<TextField
margin="dense"
id="password"
label="Password"
className={classes.textField}
type="password"
value={data.password}
onChange={this.handleChange}
fullWidth
/>
{errors.password && <InlineError text={errors.password} />}
<Button
className={classes.button}
onClick={this.clickLogin}
color="primary"
>
Enter
</Button>
</form>
</DialogContent>
</Dialog>

Answer 1

我注意到您的代码的问题是您的目标是您未创建的名称属性。 因此，请对您的代码进行以下调整

handleChange = e =>
this.setState({
data: { ...this.state.data, [e.target.id]: e.target.value }
});
onSubmit = () => {
const errors = this.validate(this.state.data);
this.setState({ errors });
};

在上面的代码中，我使用了可以在textField中正确引用 e.target.id。