react.jsのラジオボタンを検証する方法は？

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を返します。ユーザーが実際に値を選択しなくても起こっています。あなたのonChangeハンドラで

Answer 1

、それがチェックされた状態に設定があります。

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

は実際VIEWで反応します。だから、Angularのような検証機能が豊富に組み込まれていないことを知っておくべきです。あなたが計画で多くの検証をしているのであれば、すでにこれについてもっと高度なツールを検討する必要があります。例 - バックボーンモデルと反応してreact-backbone（実際の例と同じように）