ReactJS: ¿Cómo usar valores booleanos en botones de radio?

Solución:

Actualmente, la solución es convertir los atributos pasados ​​de valores de cadena a booleanos antes de guardarlos.

var str2bool = (value) => {
   if (value && typeof value === "string") {
        if (value.toLowerCase() === "true") return true;
        if (value.toLowerCase() === "false") return false;
   }
   return value;
}

Y llamando a la conversión:

onRadioChange: function(e) {
    console.log(str2bool(e.target.value));
    // Here we can send the data to further processing (Action/Store/Rest)
}

De esta manera los datos están listos para ser enviados a través de acciones a Rest o Stores y funciona directamente con los botones de radio.

Utilice el atributo de entrada marcado para los botones de opción. Ese atributo usa valores booleanos.

En caso de que esté buscando una forma de administrar el estado del botón de radio marcado con React, aquí tiene un ejemplo:

var RadioButtons = React.createClass({
  getInitialState: function () {
    // Assuming there is always one option set to true.
    return {
      question: this.props.options.filter(function (option) {
        return option.value;
      })[0].name
    };
  },
  onRadioChange: function (e) {
    this.setState({
      question: e.target.value
    });
  },
  render: function () {
    var options = this.props.options.map(function (option, key) {
      return (
        <li key={key}>
          <input type="radio" 
             name="question" 
             onChange={this.onRadioChange} 
             checked={this.state.question === option.name}
             value={option.name} /> {option.name}
        </li>
      );
    }, this);
    return (
      <ul style={{listStyle: 'none'}}>
        {options}
      </ul>
    );
  }
});

Este componente se puede utilizar para pasar su question listar como propiedades:

<RadioButtons options={question} />

Mira este violín.

---

---

Utiliza Nuestro Buscador