如何通过 ID select 特定记录将其从列表中删除？

Question

我使用 React 从 API 中获取了一些要显示的记录。这就是我获取它时的样子。

这是相关代码。

    const [checked, setChecked] = useState(false);
    
      const handleChange = () => {
        setChecked(!checked);
        console.log(checked); 
      };  

<div className="users">
            {users.map((user) => {
              return (
                <div className="users" key={user.Id} >
                  <label> 
                  <p>
                  <input
              type="checkbox"
              onChange={handleChange}
            />
                    Name: {user.Title}, EmpID: {user.EmpID}, ID: {user.Id}{" "}
                  <button onClick={() => handleClick(user.Id)} className="">
                    Delete    
                  </button>
                  </p>
                  </label>
                </div>
              );
            })}
          </div>

我想要实现的是，当我点击任何复选框时，它们各自的 ID 被选中，然后点击常规删除按钮（尚未创建），如获取和重置，通过删除所选记录他们各自的ID。这是挑战，我无法通过选中复选框来检索选定的 ID。我只想获取所有选中的复选框，即选中的 ID，以便进一步删除它。

获取的数据在控制台中看起来像这样：

谁能帮我解决这个问题？

Answer 1

您需要为所选用户使用状态数组来 check/uncheck 复选框单击删除后，它将设置用户列表，其中包含在选定用户状态下不存在的用户。

const [selectedUsers, setSelectedUsers] = useState([]);
const [users, setUsers] = useState([]) // i suppose you have this state to stock your list

const handleChange = (id) => {
  if(selectedUsers.findIndex(el => el ===id) !== -1) setSelectedUsers([...selectedUsers, id]); // if id deosn't exist we add it
  else {
    // if id exist delete it to uncheck the checkbox
    const newSelected = selectedUsers.filter((item) => item !== id)
    setSelectedUsers(newSelected);
  } 
};  

const handleDelete = () => {
  // set users with the old list without the selected ones
  const newUsers = users.filter((user) => selectedUsers.findIndex(ele => ele === user.Id) !== -1)
  setUsers(newUsers)
};  

// here where your rerset and fetch button you add this button
<button onClick={() => handleDelete()} className="">
              Delete    
            </button>
<div className="users">
      {users.map((user) => {
        return (
          <div className="users" key={user.Id} >
            <label> 
            <p>
            <input
        type="checkbox"
        checked={users.findIndex(el => el === user.Id) !== -1} 
        onChange={()=> handleChange(user.Id)}
      />
              Name: {user.Title}, EmpID: {user.EmpID}, ID: {user.Id}{" "}
            </p>
            </label>
          </div>
        );
      })}
    </div>

如何通过 ID select 特定记录将其从列表中删除？

How to select a particular record by ID to delete it from the List?

html

api

sharepoint

reactjs