如何獲取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 }); 
    } 
} 

現在我們不需要擔心管理每個單選按鈕的檢查，我們只要點擊一個按鈕即可獲取原因。這樣做的缺點是，它不是兩種方式：如果你設置狀態的原因，它不會改變實際點擊哪個單選按鈕。