为什么，用ReactJS，我不能使复选框反应被点击

Why, with ReactJS, am I failing to make checkboxes that react to being clicked?

本文关键字：复选框 ReactJS 不能 为什么      更新时间：2023-09-26

我有一个(大多数)复选框的表，我已经尝试指定一个处理程序(现在)设置为记录复选框的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。

还有什么我需要连接的吗?

谢谢,

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

查看更多信息:https://facebook.github.io/react/docs/forms.html#controlled-components

如果你想创建一个未控制的复选框，你不能指定checked属性，因为这是告诉React使它成为一个受控组件。

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

如果你想要一个非受控组件也链接到某些状态，使用LinkedStateMixin。

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

希望这对你有帮助!

可能是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的用户，一个箭头函数可以达到相同的结果。

相关文章：