如何抓取复选框并将它们置于状态？答案

【问题标题】：How to grab checkboxes and put them into state?如何抓取复选框并将它们置于状态？
【发布时间】：2019-12-22 00:06:51
【问题描述】：

我的问题如下：我有一个表，我从数据库中的一个对象生成一个包含人名、详细信息和详细信息2 的行。每个人旁边都有一个复选框。我需要将这些处于检查状态的对象放入状态对象中，并在未选中时将它们从那里删除，因为我将在提交时将此对象发送到服务器。

如何以及最好的方法是什么？

我尝试使用 current.value，但我在兜圈子，我认为我的想法不正确。

    <tr>
        <td>
            <table >
                <tbody>
                    <tr>
                        <td>
                            <div>
                                <input type="checkbox"/>
                                <label>
                                    data 1
                                </label>
                            </div>
                        </td>
                        <td data-title="Column 2">
                            data 2
                        </td>
                        <td >
                            <a href="#">
                                Edit
                            </a>
                            <a href="#"></a>
                                Delete
                            </a>
                        </td>
                        <td data-title="Column 5">
                            data 3
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
    </tr>```

【问题讨论】：

标签： reactjs checkbox html-table state

【解决方案1】：

你可以有一个handleChange函数：

handleChange = ({ target }) => {
this.setState(prevState => ({
  value: {
    ...prevState.value,
    [target.name]: target.value
  },
}));

并在复选框上使用它（确保为每个复选框命名唯一）：

<input type="checkbox" 
     ...
     name="Checkbox1"
     onChange={this.handleCheckboxChange}
/>

用这样的方式初始化状态：

this.setState({
     value: {},
});

现在，在对象 value 中，您拥有所有这些复选框的值，并且该对象看起来像这样：

value = {
    Checkbox1: true,
    Checkbox2: false,
    ...
}

如果它们未被选中，您提到将它们从状态中删除。我建议过滤：

const { value } = this.state;
const trueCheckboxesKeys = value.keys().filter(valueKey => value[valueKey]);
let trueCheckboxes = {};
for(i = 0; i < trueCheckboxesKeys.Length; i++) {
    trueCheckboxes[trueCheckboxesKeys[i]] = true;
}

【讨论】：

【解决方案2】：

您可以创建一个onChange 事件处理程序并记录event.currentTarget.checked，因为它将返回真或假。我还建议向输入元素添加某种标识符，这样您就可以知道正在检查哪个元素，以便正确跟踪它。

【讨论】：

【解决方案3】：

我做过类似的事情，用户选中一个框并更新状态。

您需要复选框的事件处理程序，加上 componentDidUpdate 以查看复选框值是否更改。

componentDidUpdate(prevProps, prevState) {
  const { CHECKBOX_NAME } = this.state;
  if (CHECKBOX_NAME !== prevState.CHECKBOX_NAME) {
    if (CHECKBOX_NAME === true) {
      this.setState({
        // do whatever
      });
    } else {
      this.setState({
        // change back if necessary
      });
    }
  }
}

handleCheckboxChange = event => {
  const { checked } = event.target;
  this.setState({
    // mark box as checked in state
  });
};

...

// checkbox
<input type="checkbox" 
  checked={this.state.CHECKBOX_NAME}
  onChange={this.handleCheckboxChange}
/>

//

【讨论】：

【解决方案4】：

这取决于你如何获取你渲染的数据，它来自 props 还是你从 api 获取，但通常，如果你有 users 数组，它可能看起来像这样：

const UserList = props => {
  const [selectedUsers, setSelectedUsers] = useState([]);

  // Your user data here
  const userData = [
    {
      id: "1",
      name: "User1",
      details: {
        /*details here */
      }
    }
  ];

  // Check if user is selected
  const isUserSelected = user => !!selectedUsers.find(u => u.id === user.id);

  // Add user to selected or remove if already there
  const selectUser = user => {
    setSelectedUsers(users => {
      if (isUserSelected(user)) {
        return users.filter(u => u.id !== user.id);
      }
      return [...users, user];
    });
  };

  return (
    <table>
      <tbody>
        {userData.map(user => (
          <tr key={user.id}>
            <td>
              <label htmlFor={`user_${user.id}`}>{user.name}</label>
              <input
                id={`user_${user.id}`}
                type="checkbox"
                checked={isUserSelected(user)}
                onChange={() => selectUser(user)}
              />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

【讨论】：