我正在努力一次检查表格中的所有复选框。
我可以检查单个复选框,但我也希望选择检查
一个“主复选框”,它检查所有其他复选框。
我创建了我的 React 组件的简化版本:
https://codesandbox.io/s/lively-wildflower-fknn9
我正在努力解决两件事。
checked={checkAll}
来覆盖选中的参数我们可以点击 All 复选框,复选框 1 和 2 都被选中。但是,它不会调用 onChange
复选框的属性,这意味着我无法记录检查。checked={checkAll}
属性,我基本上覆盖了复选框,这意味着复选框图标本身不会从选中变为未选中。 onChange
但是调用了属性,并且我能够将更改记录到控制台。我想单独检查两个复选框,并使用“主复选框”来检查两个复选框,并调用它们的
onChange
同时。我该怎么做呢?
任何建议都会非常有帮助
最佳答案
这是一种处理方式:
CodeSandbox link
这是最终的行为:
import React, { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
const [checkedAll, setCheckedAll] = useState(false);
const [checked, setChecked] = useState({
nr1: false,
nr2: false
});
/* ################################################ */
/* #### TOGGLES checK STATE BASED ON inputName #### */
/* ################################################ */
const toggleCheck = (inputName) => {
setChecked((prevState) => {
const newState = { ...prevState };
newState[inputName] = !prevState[inputName];
return newState;
});
};
/* ###################################################### */
/* #### CHECKS OR UNCHECKS ALL FROM SELECT ALL CLICK #### */
/* ###################################################### */
const selectAll = (value) => {
setCheckedAll(value);
setChecked((prevState) => {
const newState = { ...prevState };
for (const inputName in newState) {
newState[inputName] = value;
}
return newState;
});
};
/* ############################################# */
/* #### EFFECT TO CONTROL CHECKED_ALL STATE #### */
/* ############################################# */
// IF YOU CHECK BOTH INDIVIDUALLY. IT WILL ACTIVATE THE checkedAll STATE
// IF YOU UNCHECK ANY INDIVIDUALLY. IT WILL DE-ACTIVATE THE checkAll STATE
useEffect(() => {
let allChecked = true;
for (const inputName in checked) {
if (checked[inputName] === false) {
allChecked = false;
}
}
if (allChecked) {
setCheckedAll(true);
} else {
setCheckedAll(false);
}
}, [checked]);
/* ########################## */
/* #### RETURN STATEMENT #### */
/* ########################## */
return (
<div className="App">
<div>
<label>All</label>
<input
type="checkbox"
onChange={(event) => selectAll(event.target.checked)}
checked={checkedAll}
/>
</div>
<div>
<label>1</label>
<input
type="checkbox"
name="nr1"
onChange={() => toggleCheck("nr1")}
checked={checked["nr1"]}
/>
</div>
<div>
<label>2</label>
<input
type="checkbox"
name="nr2"
onChange={() => toggleCheck("nr2")}
checked={checked["nr2"]}
/>
</div>
</div>
);
}
关于javascript - 选择所有复选框/行 - React hooks 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64451632/