如何选择带有单选按钮的耳聋选项

Question

我想在收音机上选择一个默认值。我使用v0.13.3，如果表达式的计算结果为true，则通过设置checked={value===selected_value}属性来授予checked。

在生成的HTML中(由我格式化)，匹配的单选按钮是checked编辑的，但我无法选择任何其他按钮。

为什么会发生这种情况？设置选中选项的正确方法是什么？

  radio: function(value, selected_value, name, callback) {
    console.log("radio");
    console.log(value===selected_value);
    return(<label>
      <input type="radio" name="type" value={value} checked={value===selected_value}/>{name}
    </label>)
  },

  render: function() {
    selected_value = "com";
    return (
      <div>
        Options:
        <br/>
        {this.radio("cha", selected_value, "CM", null)}
        <br/>
        {this.radio("lea", selected_value, "L D", null)}
        <br/>
        {this.radio("com", selected_value, "Com", null)}
      </div>
    )

生成的HTML：

<div data-reactid=".0"><span data-reactid=".0.0">Options:</span><br data-reactid=".0.1"><label data-reactid=".0.2">

<input name="type" value="cha" data-reactid=".0.2.0" type="radio"><span data-reactid=".0.2.1">CM</span></label><br data-reactid=".0.3"><label data-reactid=".0.4">

<input name="type" value="l" data-reactid=".0.4.0" type="radio"><span data-reactid=".0.4.1">L D</span></label><br data-reactid=".0.5"><label data-reactid=".0.6">

<input name="type" value="com" checked="" data-reactid=".0.6.0" type="radio"><span data-reactid=".0.6.1">Com</span></label></div>

Answer 1

通过手动设置checked支柱，您将创建受控元件，它不会响应用户输入，除非您显式地定义了一个onChange事件处理程序来告诉组件在用户与它交互时应该做什么。

我相信你要找的是defaultChecked道具。将其设置为true或false将创建不受控制的组件，这些组件将正常地响应用户输入，同时仍然给出您要寻找的行为。