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입니다. 우리가하지 않는 지금

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

: 외부 의존성을 원하지 않는 경우

는 쉬운 대안은 다음과 같습니다 모든 라디오 버튼 상에 onChange가 핸들러를 전혀 상태를 연결하고 설정하지 않는 것입니다 각 라디오 버튼의 체크 여부를 관리하는 것에 대해 걱정할 필요가있을 때, 우리는 클릭 할 때마다 그 이유를 파악할뿐입니다. 이것에 대한 단점은 양방향으로 진행되지 않는다는 것입니다. 을 설정하면 상태에서 어떤 라디오 버튼이 실제로 클릭되는지는 변경되지 않습니다.