javascript - 为什么使用 ReactJS，我无法制作对单击使用react的复选框？

Question

我有一个(大部分)复选框表，我尝试指定一个处理程序，该处理程序(现在)设置为记录复选框的 ID，然后更新状态，以便在下次渲染时切换复选框的状态。

我不太明白的是为什么选中其中一个复选框似乎不“粘住”。更具体地说，单击复选框时用户界面不会发生变化，并且事件处理程序不会执行其 console.log()。

我的渲染方法如下；紧接着是渲染方法内容的 TL;DR，后面是似乎没有注册的事件处理程序。

  render: function()
    {
    var table_rows = [];
    var display_item_details = function(label, item)
      {
      var html_id = item.id + '.' + label;
      return (
        <td className={label} title={label}>
          <input id={html_id} onChange={this.handle_change}
          className={label} type="checkbox"
          checked={item[label]} />
        </td>
        );
      };
    var display_item = function(item)
      {
      var rendered_nodes = [];
      for(var index = 0; index < todo_item_names.length;
        index += 1)
        {
        rendered_nodes.push(
          display_item_details(todo_item_names[index], item)
          );
        }
      return (
          <tr>{rendered_nodes}
          <td dangerouslySetInnerHTML={{__html:
            converter.makeHtml(item.description)}} /></tr>
        );
      };
    table_rows.push(this.state.items.map(display_item));
    table_rows.reverse();
    return (
      <div id="Todo">
        <h1>To do</h1>
        <form onSubmit={this.handleSubmit}>
          <table>
            {table_rows}
            <tfoot>
              <textarea onChange={this.onChange}
               value={this.state.text}></textarea><br />
              <button>{'Add activity'}</button>
            </tfoot>
          </table>
        </form>
      </div>
    );
  }

渲染方法的TL;DR:

        <td className={label} title={label}>
          <input id={html_id} onChange={this.handle_change}
          className={label} type="checkbox"
          checked={item[label]} />
        </td>

似乎没有被调用的事件处理程序:

  handle_change: function(event)
    {
    console.log(event.target.id);
    var address = event.target.id.split('.', 2);
    (this.state.items[parseInt(address[0])][address[1]] =
      !this.state.items[parseInt(address[0])][address[1]]);
    save('Todo', this.state);
    },

HTML ID 类似于 3.Important。

我还需要连接其他东西吗？

谢谢

Answer 1

您的事件处理程序未被调用，并且您的复选框不接受用户输入，因为您创建了一个受控组件。

请参阅此处了解更多信息:https://facebook.github.io/react/docs/forms.html#controlled-components

如果你想创建一个不受控制的复选框，则不能指定 checked 属性，因为这就是告诉 React 将其设为受控组件的原因。

如果您想为复选框指定默认值，请使用“defaultChecked”。这将仅在初始渲染时指定默认值。

如果您想要一个也链接到某些状态的不受控组件，请使用 LinkedStateMixin .

下面是一个 JSBin，演示了如何执行这些操作以及结果:http://jsbin.com/vefowe/edit?js,output

希望这有帮助!