React移动端中实现全选和不选的实现
React移动端中实现点击全选,数据全部选择,数据有一个不选择,全选就不选
下面是一种实现方式,其中的 data
表示要选择的数据列表,每个数据对象中有一个 checked
属性,表示该数据是否被选中。当点击全选按钮时,会将所有数据的 checked
属性设为 true
,当数据有一个未被选中时,全选按钮也会被设为未选中状态。
import { useState } from "react";
function App() {
const [data, setData] = useState([
{ id: 1, name: "John Doe", checked: false },
{ id: 2, name: "Jane Smith", checked: false },
{ id: 3, name: "Bob Johnson", checked: false },
]);
const handleToggleAll = () => {
const allChecked = data.every((item) => item.checked);
setData((prevData) =>
prevData.map((item) => ({ ...item, checked: !allChecked }))
);
};
const handleToggleItem = (id) => {
setData((prevData) =>
prevData.map((item) =>
item.id === id ? { ...item, checked: !item.checked } : item
)
);
};
return (
<div>
<div>
<label>
<input
type="checkbox"
checked={data.every((item) => item.checked)}
onChange={handleToggleAll}
/>
全选
</label>
</div>
<ul>
{data.map((item) => (
<li key={item.id}>
<label>
<input
type="checkbox"
checked={item.checked}
onChange={() => handleToggleItem(item.id)}
/>
{item.name}
</label>
</li>
))}
</ul>
</div>
);
}
export default App
效果: