我已經使用 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 會被選中，然后單擊 Fetch 和 Reset 等通用洗掉按鈕（尚未創建），通過它們各自的 ID 洗掉選定的記錄。這是挑戰，我無法通過選中復選框來檢索選定的 ID。我只想獲取所有選中的復選框，即選中的 ID，以便進一步洗掉它。
獲取的資料在控制臺中看起來像這樣：
任何人都可以幫我解決這個問題嗎？
uj5u.com熱心網友回復：
您需要為所選用戶使用狀態陣列來選中/取消選中復選框一旦您單擊洗掉，它將設定用戶串列，其中包含所選用戶狀態中不存在的用戶。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/435927.html