ReactJS: Как использовать логические значения в переключателях?

Question

Что такое правильный способ использования булевых данных в переключателях. Значения будут преобразованы из булевых в строки, если они используются напрямую.

JSON-данные для полого ввода, которые поджаты:

var question = [ 
    {value: true, name: "Yes"}, 
    {value: false, name: "Not this time"} 
] 

Кнопка радио поле:

<input type="radio" 
     name="question" 
     onChange={this.state.onRadioChange} 
     value={this.state.question[0].value} /> {this.state.question[0].name} 
<input type="radio" 
     name="question" 
     onChange={this.state.onRadioChange} 
     value={this.state.question[1].value} /> {this.state.question[1].name} 

связывание для onRadioChange:

onRadioChange: function(e) { 
    console.log(e.target.value); 
} 

на консоль журнал отображает, что выбранные значения преобразуются из булевых в строки.

Одним из способов обработки этого является добавление дополнительной функции к функции onRadioChange для преобразования строк "true"/"false" в booleans от e.target.value, но это немного походит на хакерство. Кроме того, использование только «e.target.checked» не будет работать, потому что в некоторых группах переключателей у меня есть другие значения, чем booleans (которые необходимо передать).

Некоторым универсальным и чистым решением было бы использовать таблицу постоянных значений, которая преобразуется из и в REST.

Есть ли какой-нибудь специальный способ ReactJS? Возможно, нет.

Answer 1

В настоящее время решение состоит в том, чтобы преобразовать переданные атрибуты из строковых значений в boolean перед сохранением.

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

и вызывая преобразование:

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

Таким образом, данные готовы быть отправлены через действия на отдых или магазины, и он работает непосредственно с радио-кнопок.

Answer 2

Используйте проверенный атрибут ввода для переключателей. Этот атрибут использует булевы.

Answer 3

В случае, если вы ищете способ управления переключателем проверяется состояние с React, вот вам пример:

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> 
    ); 
    } 
}); 

Этот компонент можно затем использовать передавая свой question список в качестве свойств:

<RadioButtons options={question} /> 

Проверьте это fiddle.