Question

我正在尝试通过onchange将复选框中的新值添加到状态数组。但是该值将替换先前的值。

  const [checked, setCheck] = useState([]);

  const changeCheck = (event,sku) =>{
    event.preventDefault();
    setCheck(prevChecked => [...prevChecked,sku]);
  } 


  return(
  <input type="checkbox" checked={checked.includes(props.details.sku)} onChange={(event) => changeCheck(event,props.details.sku)}/>
  )

想要将props.details.sku值添加到选中的状态数组。新值将添加到数组中，而旧值将被替换也意味着状态数组保持长度为1。

Answer 1

要更新复选框状态，您需要使用以前的状态并确定是否需要添加或删除复选框值

还使用状态更新程序回调来更新状态

const [checked, setCheck] = useState([]);

  const changeCheck = (event,sku) =>{
    event.preventDefault();

    setCheck(prevChecked => {
        if(prevChecked.includes(sku)) {
           // checkbox was checked previously so uncheck it
           return prevChecked.filter(i => i !== sku);
        } else {
           // check the checkbox i.e add the id in array
           return [...prevChecked, sku]
        }
    });
  } 


  return(
      <input type="checkbox" checked={checked.includes(props.details.sku)} onChange={(event) => changeCheck(event,props.details.sku)}/>
  )

向状态数组添加值会导致替换先前的值-React钩子

1 个答案: