时间戳

首页 > 解决方案 > 没有随机键，反应复选框不会重置？

reactjs - 没有随机键，反应复选框不会重置？

问题描述

您好，我有一个看起来像这样的复选框组件

export default function Checcky({
  lab,
  checcky,
  name,
  className = "",
  onChange,
}) {
  return (
    <div className={"checkky relative flex center-flex " + className}>
      <label htmlFor={name} className="labelin mr-4">
        {lab}
      </label>
      <input
        id={name}
        name={name}
        type="checkbox"
        defaultChecked={checcky}
        onChange={onChange}
        className=" absolute center-absolute"
      />
      <label htmlFor={name} className="slider relative cursor-p"></label>
    </div>
  );
}

我像这样使用它

       <Checcky
            lab="Admin"
            name="admin"
            key={ Math.random() }
            onChange={handleChange}
            checcky={values.admin}
            className="justify-start my-4"
        />

我注意到，如果我没有把 key={Math.random()} 当我“重置”状态到他的原始值时输入不会被“检查回来”这是我通常的场景

const [values,setValues] = useState({admin:false})
const handleChange = (e) =>{
  let v = values[e.target.name];
  v = e.target.checked;
  setValues({...values,[e.target.name] : v})
}

但是，如果我可能会进行提取并且在结果之后我想像这样重置状态

const postData = async () =>{
  await fetch(somerandomurl)
  setValues({...values,admin:false})
}

输入不会被取消选中，即使状态已经改变，它也会保持选中状态，除非我输入这个 key={Math.random()} 并且我知道它可以工作，因为由于密钥更改，组件会重新呈现，但有没有办法做到这一点没有这个解决方法？

标签： reactjs

解决方案

试试这些：

使用checked而不是defaultChecked：

<input
  id={name}
  name={name}
  type="checkbox"
  checked={checcky}
  onChange={onChange}
  className=" absolute center-absolute"
/>

使用功能状态更新，因为您的新状态取决于旧状态：

const handleChange = (e) => {
  const { name, checked } = e.target;
  setValues(prevValues => ({...prevValues, [name]: checked }))
}

和

const postData = async () =>{
  await fetch(somerandomurl)
  setValues(prevValues => ({...prevValues, admin: false }))
}

推荐阅读