javascript - react 渲染输入类型复选框未选中

Question

我有一个 react 组件，它是一个表，每行(条目)都有一个 <td>那是一个复选框。我使用状态来保存所有已检查的条目，并将单击处理程序附加到按钮以删除所有这些已检查的条目。问题是 React 根据比较来渲染组件的一部分，因此当我的组件在删除后重新渲染时，一些新条目的框已经被选中。我该如何摆脱它们？

下面是我的组件的渲染函数:

  render: function () {
    var that = this;
    var contacts = this.state.contacts.map(function (contact, index) {
      return (
        <tr key={index}>
          <td>{contact.firstName}</td>
          <td>{contact.lastName}</td>
          <td>{contact.city}</td>
          <td>{contact.phone}</td>
          <td>{contact.email}</td>
          <td><input type="checkbox" onClick={that.addToDeleteList.bind(that, contact.id)}/></td>
        </tr>
      );
});

Answer 1

您让浏览器管理这些复选框的状态。

您可以使用以下内容绑定(bind)检查:

checked={that.state.deleteList.indexOf(contact.id) > -1}

这会将复选框是否选中与 id 是否在删除列表中绑定(bind)。只要您在删除时清空删除列表，就应该取消选中这些框。