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

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

预加载的输入字段的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

函数中添加一个额外的函数，将

“true”/“false”

字符串从

e.target.value

转换为布尔值，但这感觉有点骇客。此外，仅使用“e.target.checked”也不起作用，因为在某些单选按钮组中，我有布尔值以外的值（需要传递）

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

---

有什么特别的方法吗？可能不是。

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

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

---

这样，数据就可以通过操作发送到Rest或Store，并直接与单选按钮一起工作。

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

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

---

选中此项。

处理是/否的最佳解决方案是复选框，因为您可以在target.checked的帮助下使用布尔值。 不幸的是，如果您想使用2个收音机，最简单的解决方案是依靠字符串

您不能使用target.checked with radios（在其中一个答案中建议），因为它始终为真。如果单击第一个收音机，其target.checked inside handleChange（）将为true，如果单击第二个收音机，其target.checked也将为true（例如，您永远不会得到false）

功能手柄更改（e）{
常量值=e.target.value；
setState（{答案：值}）；
}
对
这次不行

---

完整示例：

属性的值始终是字符串。如果此值必须为truthy或falsy，则唯一的falsy字符串为

“

，即

！""; // 对

@PaulS。是的，说得好。对于JSON数据，这是一种非常常见的情况，即需要将布尔值绑定到单选按钮，并且一些框架/库具有绑定上的自动转换。我想知道人们是如何对此做出反应的，是否有一些神奇的助手。我想你可以

foo | |'

，但你可能需要检查提交数据，因为错误选择可能会消失。这

值

是否意味着单选按钮被选中？为什么要将单选按钮值设置为布尔值？@dreyescat我想保持数据结构类似于原始预加载的JSONe.target.value仍然是字符串，与原始JSON中的类型不同（它们可能在存储中使用相同的数据结构）event.target.checkedChecked可能是处理布尔值的正确方法。虽然，（在本例中）有时我需要有多个按钮的字符串值。这不起作用：target.checked将始终为true

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

<RadioButtons options={question} />

function handleChange(e) {
  const value = e.target.value;
  setState({answer: value});
}

<input
  type="radio"
  name="answer"
  onChange={handleChange}
  value="yes"
  checked={answer === "yes"}
/> Yes

<input
  type="radio"
  name="answer"
  onChange={handleChange}
  value="no"
  checked={answer === "no"}
/> Not this time