[英]How to validate a radio button in react.js?
我有一组单选按钮来检查用户的性别。
这是我的单选按钮标记。
export default class Gender extends React.Component {
genderRow(gender) {
return (
<Radio onBlur={this.props.validate} key={gender.id} name="gender" value={gender.id} label={gender.text} onChange={this.props.onChange}/>
)
}
render() {
let genderError;
if(this.props.errors.gender) {
genderError = <span className="has-error">Gender is required</span>
} else {
genderError = null;
}
return (
<div>
{genderError}
{this.props.gender.map(g => this.genderRow(g))}
</div>
)
}
}
onBlur 我正在尝试调用以下函数。
validate(event) {
let name = event.target.name;
let errors = this.state.errors;
if(!event.target.value) {
errors[name] = true;
this.setState({ errors: errors })
}
}
问题如下。 由于单选按钮是一个受控组件,因此始终存在一个真实值,这意味着当我检查!event.target.value
时,它将返回 false,即使用户实际上没有选择一个值,也会发生这种情况。
在您的onChange
处理程序中,将其设置为选中状态:
onChange: function() {
this.setState({checked: !this.state.checked})
}
然后将您的验证调整为:
validate(event) {
let name = event.target.name;
let errors = this.state.errors;
if(!event.target.checked) {
errors[name] = true;
this.setState({ errors: errors })
}
}
实际上 React 是一个视图。 所以你应该知道它没有像 Angular 那样丰富的内置验证功能。 如果您在计划中有很多验证,或者您应该为此寻找一些更高级的工具。 示例 - 将 Backbone 模型与react-backbone一起使用(就像一个活生生的例子)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.