¿Cómo puedo hacer botones de radio reutilizables usando REACT js?

SOURCE 7385 palabras reactjs

Descripción

probé las siguientes instrucciones:
http://react.tips/radio-buttons-in-reactjs/
Este Código casi funciona, pero no parece que sepa qué está mal. Usando ambas opciones de radio, haga clic en el botón de radio seleccionado para cambiar la selección a otra opción. Hacer clic en una radio no seleccionada no hace nada. Intenté muchas cosas, pero nada parecía hacer que la radio funcionara como se esperaba. Haga clic en la opción no seleccionada para seleccionarla.
Este es mi código: (* actualizado)
var RadioInput = React.createClass({
getInitialState: function () {
    return {selectedOption: "0"};
},
handleOptionChange: function (changeEvent) {
    this.setState({selectedOption: changeEvent.target.value});
    console.log(this.state.selectedOption, changeEvent.target, this.props.inputValue);
},    
render: function () {
  var isChecked = this.state.selectedOption === this.props.inputValue;
  return (<p><label>
          <input type="radio" name={this.props.inputName} value={this.props.inputValue}  checked={isChecked} onChange={this.handleOptionChange}/>{this.props.labelText}
    </label></p>);
}
});
Espero que con esta entrada radiactiva genérica pueda reutilizarla en otros componentes que compilen una serie de entradas de formulario juntas... Como hice aquí abajo...
var MediaInfo = React.createClass({
render: function () {
    return (
        <div className="thumbnail">
            <div className="caption text-center">
                <h3>Media Contact Options</h3>
                <form className="text-left">
                    <p>Please indicate your contact preferences for media inquiries below:</p>
                    <div className="form-group">
                        <div className="col-md-12">
                            {this.props.fields.options.map (function (data, i) {
                                return (<RadioInput key={i} inputName={data.inputName} labelText={data.labelText} inputValue={data.inputValue} />);
                            })}



                        </div>
                    </div>
                    {this.props.fields.fields.map (function (data, i) {
                        return (<TextInput key={i} inputName={data.inputName} labelText={data.labelText} placeholderText={data.placeholderText} inputValue={data.inputValue} />);
                    })}
                </form>
            </div>
        </div>            
    )
}
});
var MemberInfo = React.createClass({
getInitialState: function () {
    return {
        contactInfo: [  {inputName:"fullName", labelText:"Display Name", placeholderText:"Enter Full Name", inputValue:"some name"},
                        {inputName:"phoneNumber", labelText:"Phone Number", placeholderText:"Enter Phone Number", inputValue:"001-555-1234"},
                        {inputName:"email", labelText:"Email", placeholderText:"Enter Email", inputValue:"[email protected]"},
                        {inputName:"address", labelText:"Address", placeholderText:"Enter Address", inputValue:"123 Main St. Podunk, FL"}
                     ],
        mediaContact: {fields: [ {inputName: "email", labelText: "Media Email", placeholderText:"Enter Medial Contact Email", inputValue:"[email protected]"},
                        {inputName: "phone", labelText: "Media Phone", placeholderText:"Media Contact Phone Number", inputValue:"001-555-1234"},
                      ],
                      options: [
                          {inputName: "mediaConsent", labelText: " Yes, I would like to be contacted by the Media.", inputValue:"1"},
                          {inputName: "mediaConsent", labelText: " No, I do not wish to be contacted by the Media.", inputValue:"0"}
                      ]
                      }
    }
},
render: function () {
    return (
                    <div className="panel panel-default">
                        <div className="panel-heading">
                            <h3 className="panel-title">Manage Your Contact Info</h3> </div>
                        <div className="panel-body">
                            <div className="col-md-6">
                                <div className="row">
                                    <div className="col-xs-12">
                                        <ContactInfo fields={this.state.contactInfo} />
                                    </div>
                                </div>
                            </div>
                            <div className="col-md-6">
                                <div className="row">
                                    <div className="col-xs-12">
                                        <MediaInfo fields={this.state.mediaContact} />
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    );

},
});

Solución correspondiente

la propiedad name necesita ser configurada si desea utilizar más de un botón de radio. Además, si sólo hay un botón de radio, no se puede deseleccionar (usando la casilla de verificación).
var RadioInput = React.createClass({
  getInitialState: function() {
    return { selectedOption: false };
  },

  handleOptionChange: function(e) {
    this.setState({ selectedOption: e.target.value });
  },

  render: function() {
    var isChecked = this.state.selectedOption === this.props.inputValue;
    return (
      <p><label>
        <input
          type="radio"
          value={this.props.value}
          name={this.props.name}
          selected={isChecked}
          onChange={this.handleOptionChange} />
          {this.props.value}
      </label></p>
    );
  }
});

ReactDOM.render(<form>
                 <RadioInput name="group" value="one" />
                 <RadioInput name="group" value="two" />
                </form>, document.getElementById('View'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>