这是我第一次开发 react 应用程序。我尝试在表格的每一行中实现复选框并检查选择了哪些行。
我使用useState
钩子来制作选中和onChange事件,但是当我选中然后取消选中复选框时,似乎值没有刷新。
我想问一下如何添加一个逻辑来删除钩子上未选中的值。
T1复选框 A - 选中复选框 B - 选中已检查地图- A,B
T2复选框 B - 未选中CheckedMap- A,B//未勾选的复选框 B 也存储在 CheckedMap 中
谢谢你的帮助。
export default function({ infinite }) {
const [checkedMap, setCheckedMap] = useState(new Map());
}
const handleCheckedChange = transaction_seq => {
let modifiedMap = checkedMap;
modifiedMap.set(transaction_seq, !checkedMap.get(transaction_seq));
setCheckedMap(modifiedMap);
};
const columns = [
{
Header: "Transaction(s)",
className: "left",
columns: [
{
id: "checkbox",
accessor: "checkbox",
Cell: ({ row }) => {
return (
<input
type="checkbox"
className="checkbox"
checked={checkedMap.get(row.original.transaction_seq)}
onChange={() =>
handleCheckedChange(row.original.transaction_seq)
}
这是如何将受控复选框与 react useState
钩子一起使用的方法。
const { useState } = React; // --> for inline use
// import React, { useState } from 'react'; // --> for real project
const App = () => {
const [checked, setChecked] = useState(false)
const handleClick = () => setChecked(!checked)
return <input onClick={handleClick} checked={checked} type="checkbox" />
};
ReactDOM.render(<App />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.9.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.9.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
使用 onClick 时可能会收到函数的错误。而是使用 onChange:
import { useState} from "react";
export default function App() {
const [checked, setChecked] = useState<boolean>(true);
return (
<input name="checked" type="checkbox" checked={checked}
onChange={e => setChecked(!checked)} />
)
}
使用 onChange 时,您得到了一个事件对象。使用该事件检查复选框是否已选中
//here, you got access to event object
onChange={(e) =>
handleCheckedChange(e, row.original.transaction_seq)
}
然后,在您的函数中,只需使用该事件来检查状态
const handleCheckedChange = (e, transaction_seq) => {
if(e.target.checked == true){
//do something
}
if(e.target.checked != true){
//do something else
}
};
您可以在 map 中检查检查状态,然后决定是设置值还是删除该值
const handleCheckedChange = transaction_seq => {
let modifiedMap = checkedMap;
if(checkedMap.get(transaction_seq)) {
modifiedMap.delete(transaction_seq)
} else {
modifiedMap.set(transaction_seq, true);
}
setCheckedMap(modifiedMap);
};