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

IT技术 reactjs
2021-05-24 12:58:29

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

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" />

现在的问题是它的推送不是一个功能 谁能指导我完成此代码或任何更改？

2个回答

由于您在former使用push/时已经直接改变了对象中的数组splice，因此在设置新的前一个值时无需使用 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

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

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})
}
其它你可能感兴趣的问题
上一篇为什么 React 的 Material-UI 和 Facebook 登录示例出现“无效挂钩警告”？ 下一篇为什么 ref 不是子组件中的属性？