我想将复选框数据存储到功能状态钩子中，但无法做到

Question

我有一个功能组件和状态钩子，现在问题是我想将所有选中的项目推送到 useState 钩子e.target.name的特定数组中

const [former, setformer] = useState({        
blocka : [],
blockb : [],
blockc : []
})
//This handle event I got some idea from one of stackoverflow : https://stackoverflow.com/questions/37129437/how-do-i-use-react-and-forms-to-get-an-array-of-checked-checkbox-values
const handleCheck = (e) => {
const fieldname = e.target.name
const options = former.fieldname
let index
if (e.target.checked) {
options.push(+e.target.value)
} else {
index = options.indexOf(+e.target.value)
options.splice(index, 1)
}
setformer({ ...former, [options]: options})
}

<input type="checkbox" name="blocka" onChange={handleCheck} value="a" />
<input type="checkbox" name="blocka" onChange={handleCheck} value="b" />
<input type="checkbox" name="blocka" onChange={handleCheck} value="c" />
<input type="checkbox" name="blockb" onChange={handleCheck} value="d" />
<input type="checkbox" name="blockb" onChange={handleCheck} value="e" />
<input type="checkbox" name="blockb" onChange={handleCheck} value="f" />
<input type="checkbox" name="blockc" onChange={handleCheck} value="g" />
<input type="checkbox" name="blockc" onChange={handleCheck} value="h" />
<input type="checkbox" name="blockc" onChange={handleCheck} value="i" />

现在的问题是它的抛出推送不是一个函数 任何人都可以指导我完成此代码或任何更改吗？

Answer 1

由于您在使用push/splice时已经直接改变了former对象中的数组，因此在设置新的先前值时无需使用 spread 语法。

const handleCheck = ({ target }) => {
const { name: blockName, checked, value } = target; // say we click checkbox "a"
// at this point, former = { blocka: [], blockb: [], blockc: [] }
if (checked) {
former[blockName].push(value); // modifies blocka to become [ "a" ]
} else {
const index = former[blockName].indexOf(value);
former[blockName].splice(index, 1);
}
setformer(former); // new former values override old
// { blocka: ["a"], blockb: [], blockc: [] }

};

https://codesandbox.io/s/jolly-platform-eip7p

Answer 2

这里真正的问题是您尝试使用错误的语法访问计算对象属性。在更改状态之前，您还需要制作状态的真实副本。

const handleCheck = (e) => {
const fieldname = e.target.name
// [...old] to create a new array out of the previous values. Protects against mutation
const options = [...former[fieldname]] // Access object as an array for computed property name
if (e.target.checked) {
options.push(e.target.value)
} else {
let index = options.indexOf(e.target.value)
options.splice(index, 1)
} 
// use same computed property name as above
setformer({ ...former, [fieldname]: options})
}