我正在尝试使用ReactJS在我的注册表单上创建客户端验证 . 我正在使用http://validatejs.org/库进行验证以及https://github.com/jhudson8/react-semantic-ui组件来渲染semantic-ui React组件 . 这是代码 .
var constraints = {
email: {
presence: true,
email:true
},
password: {
presence: true,
length: { minimum: 5 }
}
}
var RegistrationForm = React.createClass({
getInitialState: function() {
return {
data: {},
errors: {}
};
},
changeState: function () {
this.setState({
data: {
email: this.refs.email.getDOMNode().value,
password: this.refs.password.getDOMNode().value,
password_confirmation: this.refs.password_confirmation.getDOMNode().value
}
});
console.log("State after update");
console.log(this.state.data);
},
handleChange: function(e) {
this.changeState();
var validation_errors = validate(this.state.data, constraints);
if(validation_errors){
console.log(validation_errors);
this.setState({errors: validation_errors});
}
else
this.setState({errors: {}});
},
handleSubmit: function(e) {
e.preventDefault();
//code left out..
},
render: function() {
var Control = rsui.form.Control;
var Form = rsui.form.Form;
var Text = rsui.input.Text;
var Button = rsui.form.Button;
return (
<Form onSubmit={this.handleSubmit} onChange={this.handleChange}>
<h4 className="ui dividing header">New User Registration</h4>
<Control label="Email" error={this.state.errors.email}>
<Text name="email" type="email" ref="email" key="email" value={this.state.data.email}></Text>
</Control>
<Control label="Password" error={this.state.errors.password}>
<Text name="password" type="password" ref="password" key="password" value={this.state.data.password}></Text>
</Control>
<Control label="Password Confirmation">
<Text name="password_confirmation" type="password" ref="password_confirmation" key="password_confirmation" value={this.state.data.password_confirmation}></Text>
</Control>
<Button> Register </Button>
</Form>);
}
});
我遇到的问题是，当我调用this.setState时，状态不会立即更新，所以当我调用validate（this.state.data，constraints）时，我正在验证以前的状态，因此用户的UI体验变得奇怪，例如：
如果我在我的电子邮件字段中有'example @ em'并输入'a'，它将验证字符串'example @ em'而不是'example @ ema'，因此实质上它总是验证新键击之前的状态 . 我必须在这里做一些根本错误的事情 . 我知道组件的状态不会立即更新，只有在渲染完成后才会更新 .
我应该在渲染功能中进行验证吗？
---解决方案---
像Felix Kling一样向setState添加回调建议解决了这个问题 . 以下是带有解决方案的更新代码：
var RegistrationForm = React.createClass({
getInitialState: function() {
return {
data: {},
errors: {}
};
},
changeState: function () {
this.setState({
data: {
email: this.refs.email.getDOMNode().value,
password: this.refs.password.getDOMNode().value,
password_confirmation: this.refs.password_confirmation.getDOMNode().value
}
},this.validate);
},
validate: function () {
console.log(this.state.data);
var validation_errors = validate(this.state.data, constraints);
if(validation_errors){
console.log(validation_errors);
this.setState({errors: validation_errors});
}
else
this.setState({errors: {}});
},
handleChange: function(e) {
console.log('handle change fired');
this.changeState();
},
handleSubmit: function(e) {
e.preventDefault();
console.log(this.state);
},
render: function() {
var Control = rsui.form.Control;
var Form = rsui.form.Form;
var Text = rsui.input.Text;
var Button = rsui.form.Button;
return (
<Form onSubmit={this.handleSubmit} onChange={this.handleChange}>
<h4 className="ui dividing header">New Rowing Club Registration</h4>
<Control label="Email" error={this.state.errors.email}>
<Text name="email" type="email" ref="email" key="email" value={this.state.data.email}></Text>
</Control>
<Control label="Password" error={this.state.errors.password}>
<Text name="password" type="password" ref="password" key="password" value={this.state.data.password}></Text>
</Control>
<Control label="Password Confirmation">
<Text name="password_confirmation" type="password" ref="password_confirmation" key="password_confirmation" value={this.state.data.password_confirmation}></Text>
</Control>
<Button> Register </Button>
</Form>);
}
});
---更好的解决方案-----
请参阅下面的FakeRainBrigand解决方案 .
3 回答
当您想从状态派生数据时，最简单的方法就是在您真正需要它之前 . 在这种情况下，您只需要渲染 .
状态应该很少用作派生数据缓存 . 如果您确实想在设置状态时派生数据，请务必小心，并将其设为实例属性（例如
this.errors） .因为setState回调实际上会导致额外的渲染周期，所以你可以不变地更新数据，并将它传递给this.validate（看看我如何使validate不依赖于上面代码中this.state.data的当前值？） .
根据您当前的changeState，它看起来像这样：
在评论/答案中，人们都说错误应该处于状态，这有时是正确的 . 如果在没有错误处于状态的情况下无法实现渲染，则它们应处于状态 . 当您可以通过从状态派生现有数据来实现时，这意味着将其置于状态将是多余的 .
冗余的问题是它增加了很难追踪错误的可能性 . 您无法避免将数据保持为状态的示例是使用异步验证 . 没有冗余，因为你无法从表单输入中获得它 .
这正是原因 .
为什么不在设置状态之前验证数据？错误也是状态，因此以与状态的其余部分相同的方式设置它们是合乎逻辑的 .
一个简单的解决方案是检查
changeState方法中数据的有效性 .另一种解决方案是传递callback to setState: