Question

我有一个（大部分）复选框表，我试图指定一个处理程序（现在）设置为记录复选框的ID，然后更新状态，以便下次渲染复选框＆＃39 ; s状态将被切换。

我不太明白为什么选中其中一个复选框似乎并没有＆＃34;坚持＆＃34;。更具体地说，用户界面在单击复选框时不会改变，并且事件处理程序没有执行其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

如果要创建一个Uncontrolled复选框，则不能指定checked属性，因为这是告诉React使其成为受控组件的。

如果您要为复选框指定默认值，请使用＆＃39; defaultChecked＆＃39;代替。这将在初始渲染上指定默认值。

如果您想要一个也与某个州相关联的非受控制组件，请使用LinkedStateMixin。

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

希望这有帮助！

Answer 2

可能是this上下文丢失了。函数不会自动继承this上下文。解决此问题的一种方法是修复display_item_details，如下所示：

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>
  );
}.bind(this);

对于那些使用ES2015的人来说，箭头功能会达到相同的效果。

为什么，使用ReactJS，我没有制作对被点击做出反应的复选框？

2 个答案: