Question

我有一组用于检查用户性别的单选按钮。

这是我的单选按钮标记。

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，即使用户实际上没有选择值，也会发生这种情况。

Answer 1

在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 })
  }
}

Answer 2

实际上React是一个视图。所以你应该知道它没有像Angular那样丰富的内置验证功能。如果你在计划中有很多验证，或者你已经应该寻找一些更高级的工具。示例 - 将Backbone模型与react react-backbone一起使用（仅作为实例）

如何验证react.js中的单选按钮？

2 个答案: