如何获取ReactJS中的一组单选按钮的值

Question

我有一组4个单选按钮，我需要获取所选按钮的值。我应该确保用户选择了其中一个单选按钮。这里是我正在努力做到这一点：

export const ReportClass = React.createClass({ 
    mixins: [React.addons.LinkedStateMixin], 

    getInitialState() { 
     return { 
      reason: "", 
     } 
    }, 

    setError(id, msg) { 
     const err = this.state.errors; 
     err[id] = msg; 
     this.setState({errors: this.state.errors}); 
    }, 

    sendReport(event) { 
     event.preventDefault(); 
     console.log(this.state.reason); 
     console.log(this.state.reason.value); 
     if (!this.state.reason) { 
      this.setError('reason', "Please choose one"); 
      return; 
     } 
    }, 

    render: function() { 
     return (
      <div> 
       <form className="form-h" onSubmit={this.sendReport}>       
        <label forHtml='first'> first radio button </label> 
        <input ref='first' name='reason' type='radio' value='first' checkedLink={this.linkState('reason')} /> 

        <label forHtml='second'> second radio button </label> 
        <input ref='second' name='reason' type='radio' value='second' checkedLink={this.linkState('reason')} /> 

        <label forHtml='third'> third radio button</label> 
        <input ref='third' name='reason' type='radio' value='third' checkedLink={this.linkState('reason')} /> 

        <label forHtml='forth'> forth radio button </label> 
        <input ref='forth' name='reason' type='radio' value='forth' checkedLink={this.linkState('reason')} /> 

        <div className="col-sm"> 
         <button type="submit" className="btn" onClick={this.sendReport}> Send</button> 
        </div>        
       </form> 
      </div> 
     ); 
    } 
}); 

的console.log(this.state.reason)回报true当按下其中一个按钮选择第二个，console.log(this.state.reason.value)回报undefined。那么我怎么才能知道哪一个是选择的价值呢？

Answer 1

我认为checkedLink将一个个体单选按钮的检查状态绑定到该状态。由于您将多个单选按钮绑定到相同的状态键，并且单选按钮是互斥的，所以reason将始终是上次触发的任何更改事件。

在我看来，最好的解决方案是使用react-radio-group。

如果你不希望外部的依赖呢，一个简单的办法是不是在所有的每一个单选按钮，看起来像这样链路状态并设置onChange处理：

function onChange(e) { 
    if (e.target.selected) { 
    this.setState({ reason: e.target.value }); 
    } 
} 

现在我们不需要担心管理每个单选按钮的检查，我们只要点击一个按钮即可获取原因。这样做的缺点是，它不是两种方式：如果你设置状态的原因，它不会改变实际点击哪个单选按钮。