未选中反应渲染输入类型复选框

Question

我有一个react组件，它是一个表，每行（条目）都有一个<td>复选框。我使用state来保存已经检查过的所有条目，并将单击处理程序附加到按钮以删除所有这些已检查的条目。问题是React基于diffing呈现组件的一部分，因此当我的组件在删除后重新呈现时，一些新条目已经检查了它们的框。我如何摆脱它们？

以下是我的组件的渲染功能：

  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

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

您可以使用以下内容进行绑定：

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

这将绑定是否检查复选框是否id在删除者中。只要您在删除时清空了删除者，就应该取消选中这些框。