logo标签列表

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

javascriptreactjsradio-button
17

如何正确地在单选按钮中使用布尔数据。如果直接使用，则这些值将从布尔转换为字符串。

预加载的输入字段的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转换并返回。

是否有特殊的ReactJS方法来解决这个问题？也许没有。

2
Attribute 的值始终是 _String_。如果该值必须为 truthy 或 _falsy_，则唯一的 falsy String 是 ""，即 !""; // true。 - Paul S.
@PaulS。是的，说得好。使用JSON数据时，将布尔值绑定到单选按钮是非常常见的情况，一些框架/库在绑定时具有自动转换功能。我想知道人们如何在React中实现这一点，是否有一些神奇的助手。 - Pekka
我认为你可以使用 foo || ''，但是在此之后你可能需要检查提交的数据，因为 false 选择可能会消失。 - Paul S.
这个 value 是否表示单选按钮被选中？为什么要将单选按钮的值设置为布尔值？ - dreyescat
@dreyescat 我想保持数据结构与原始预加载的JSON类似。 - Pekka
5个回答
19

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

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，并且直接与单选按钮一起使用。

9

在单选框中使用输入的checked属性。该属性使用布尔值。

e.target.value 仍然是字符串类型，与原始 JSON 中的类型不同（它们可能在 Store 中使用相同的数据结构）。 - Pekka
4
事件目标的选中状态。 - J. Mark Stevens
使用 Checked 可能是处理布尔值的正确方式。尽管在某些情况下，我需要具有多个按钮的字符串值。 - Pekka
4
这行代码无效：target.checked 总是为 true。 - tanguy_k
2

如果你正在寻找一种用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>
    );
  }
});

这个组件可以通过传递你的问题列表作为属性来使用：

<RadioButtons options={question} />

点击此链接查看这个fiddle。

2
最佳处理是使用复选框，因为您可以利用target.checked来使用布尔值来处理是/否。 如果您想使用两个单选按钮，不幸的是最简单的解决方案是依赖于字符串。
您无法在单选按钮中使用target.checked（在其中一个答案中提出），因为它将始终为true。如果您点击第一个单选按钮，则其handleChange（）中的target.checked将为true，然后如果您点击第二个单选按钮，则其target.checked也将为true（例如，您永远不会得到false）。
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
0

在React中使用二进制（真或假值）单选按钮时，请为每个输入值使用一个真值和一个假值字符串，然后在您的handleChange函数中使用以下任一选项：Boolean(ev.target.value) 或 !!ev.target.value。这将把您在ev.target.value中拥有的任何字符串转换为布尔值。

例如：

       <input
        type="radio"
        name="radioButtonField"  
        value="foo"    //a truthy string 
        onChange={(ev) =>
          setState((currentState) => ({
            ...currentState,
            [ev.target.name]: Boolean(ev.target.value),
          }))
        }
      />
      <input
        type="radio"
        name="radioButtonField"
        value=""       //a falsy string
        onChange={(ev) =>
          setState((currentState) => ({
            ...currentState,
            [ev.target.name]: Boolean(ev.target.value),
          }))
        }
      />
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接