Question

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

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

我尝试使用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>```

Answer 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;
}

Answer 2

您可以创建一个onChange事件处理程序并记录event.currentTarget.checked，因为它将返回true或false。我还建议向输入元素添加某种标识符，以便您可以知道正在检查的元素，从而可以正确地对其进行跟踪。

Answer 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}
/>

//

Answer 4

这取决于您如何获取呈现的数据，是从props还是从api获取数据，但是通常，只要您拥有users数组，它的外观就可能像这样：< / p>

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>
  );
};

如何获取复选框并将其置于状态？

4 个答案: