ReactJS：如何在单选按钮中使用布尔值？

What is the proper way to use boolean data in radio buttons. The values will be converted from booleans to strings if used directly.

在单选按钮中使用布尔数据的正确方法是什么。如果直接使用,这些值将从布尔值转换为字符串。

JSON-data for input fields that is preloaded:

预加载的输入字段的JSON数据:

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

The radio button fields:

单选按钮字段:

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

The binding for onRadioChange:

onRadioChange的绑定:

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

The console log displays that the selected values are converted from booleans to strings.

控制台日志显示所选值从布尔值转换为字符串。

One way to handle this would be add an extra function to the onRadioChange function to convert "true"/"false" strings to booleans from e.target.value but its feels a bit hackery. Also, using just 'e.target.checked' won't work, because in some radio button groups I have other values than booleans (that needs to be passed through).

解决这个问题的一种方法是在onRadioChange函数中添加一个额外的函数,将“true”/“false”字符串转换为e.target.value中的布尔值但是感觉有点hackery。另外,仅使用'e.target.checked'将不起作用,因为在某些单选按钮组中,我有其他值而不是布尔值(需要通过)。

Some universal and clean solution would be to use constant values table that is transformed from and to REST.

一些通用且干净的解决方案是使用从REST转换为REST的常量值表。

Are there any special ReactJS way to do it? Maybe not.

是否有任何特殊的ReactJS方法可以做到这一点?也许不会。

3 个解决方案

#1

Use the checked attribute of input for radio buttons. That attribute uses booleans.

对单选按钮使用输入的checked属性。该属性使用布尔值。

#2

Currently the solution is to convert the passed attributes from string values to boolean before saving.

目前解决方案是在保存之前将传递的属性从字符串值转换为布尔值。

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

And calling the conversion:

并致电转换:

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

This way the data is ready to be send through actions to Rest or Stores and it works directly with the radio buttons.

这样,数据就可以通过操作发送到Rest或Stores,并且可以直接使用单选按钮。

#3

In case that you are looking for a way to manage the radio button checked state with React, here you have an example:

如果您正在寻找使用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>
    );
  }
});

This component can then be used passing your question list as properties:

然后可以使用此组件将您的问题列表作为属性传递:

<RadioButtons options={question} />

Check this fiddle.

检查这个小提琴。

#1