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

Posted 2023-03-05

【中文标题】ReactJS：如何在单选按钮中使用布尔值？

【英文标题】：ReactJS: How to use boolean values in radio buttons?

【发布时间】：2016-04-05 12:04:06

【问题描述】：

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

预加载的输入字段的 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" 字符串从e.target.value 转换为布尔值，但感觉有点骇人听闻。此外，仅使用“e.target.checked”是行不通的，因为在某些单选按钮组中，我有其他值而不是布尔值（需要传递）。

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

有什么特殊的 ReactJS 方法可以做到吗？也许不会。

【问题讨论】：

Attribute 的值始终是 String。如果这个值必须是 truthy 或 falsy 那么唯一的 falsy String 是""，即!""; // true

@PaulS。是的，好点。对于 JSON 数据，这是很常见的情况，您需要将布尔值绑定到单选按钮，并且某些框架/库对绑定具有自动转换。我想知道人们是如何做出反应的，是否有一些神奇的帮手。

我想你可以foo || ''，但是你可能需要检查你的提交数据，因为错误的选择可能会消失

value 是否意味着选中了单选按钮？为什么要将单选按钮的值设置为布尔值？

@dreyescat 我想保持与原始预加载 JSON 相似的数据结构

【参考方案1】：

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

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 或 Stores，并且可以直接使用单选按钮。

【参考方案2】：

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

您不能将 target.checked 与收音机一起使用（在其中一个答案中提出），因为它始终是正确的。如果你点击第一个收音机，它在 handleChange() 中的 target.checked 将为真，然后如果你点击第二个收音机，它的 target.checked 也将为真（例如，你永远不会得到假）。

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

完整示例：https://codesandbox.io/s/stack-overflow-34547733-nc04l

【参考方案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。

【参考方案4】：

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

【讨论】：

e.target.value 仍然是字符串，其类型与原始 JSON 中的类型不同（它们可能在 Store 中使用相同的数据结构）

event.target.checked

Checked 可能是处理布尔值的正确方法。虽然，（在这种情况下）有时我需要有几个按钮的字符串值。

这不起作用：target.checked 将永远为真