const 更改值时输入属性不更新答案

【问题标题】：Input attribute doesn't update when const change valueconst 更改值时输入属性不更新
【发布时间】：2022-01-18 12:20:51
【问题描述】：

随着组件的安装，pickedTrue 的值从 false 变为 true。但是输入 defaultChecked 没有更新它只是设置为 false。

page.js：

function page() {
    return (
        <Checkbox checked={'1'} />
    )
}

export default page

复选框组件：

function Checkbox({checked}) {
 const pickedTrue = checked == '1' ? true : false

 console.log(pickedTrue)

 return (
     <input type="checkbox" defaultChecked={pickedTrue}/>
  )
 }

export default Checkbox

console.log(pickedTrue) 输出：

undefined

false

undefined

undefined

true

*注意：如果我使用=== 而不是==，无论哪种方式都会导致false。

【问题讨论】：

也许你应该像这样将defaultChecked 替换为checked：` `，试试看
也许是<input type="checkbox" defaultChecked={checked === '1'}/>?
@screwspike 我起初尝试过。但后来它变成只读的。它甚至显示一个警告说我应该使用defaultChecked
@Daniel。值checked '1' 来自数据库，并且该组件在其他页面中使用。并不是所有的值都是1。这就是为什么我把它设为条件：const pickedTrue = checked == '1' ? true : false

标签： reactjs

【解决方案1】：

就像其他人建议的那样，您可能想要跟踪本地状态的值。

无论如何，这是我对您的问题的看法。它可以接受 0 和 1 并相应地设置复选框。

代码沙盒 - https://codesandbox.io/s/musing-lovelace-41y75?file=/src/Checkbox.jsx

参考 - https://www.robinwieruch.de/react-checkbox/

【讨论】：

【解决方案2】：

您可以使用 useState 来处理它。因为状态会重新呈现每一个变化。

  ...

  const [checked, setChecked] = useState(false);

  console.log(checked);

  return (
    <input
      type="checkbox"
      onChange={() => setChecked(!checked)}
      defaultChecked={checked}
    />
  );

demo

【讨论】：

感谢您的回答。但它仍然不起作用。当值改变时输入不会更新。
你能看看我的演示链接吗？

【解决方案3】：

使用状态变量而不是常量值。为了有效地记录对变量的更改，您最好将 useEffect 与依赖项一起使用。在您的依赖项中，使用选中而不是 defaultChecked 并添加一个 onChange 函数，以便在您单击复选框时更新您的输入。

function Checkbox({defaultChecked}) {
  const [checked, setChecked] = useState(defaultChecked === '1');

  useEffect(() => {
    console.log(checked);
  }, [checked])

  return (
    <input type="checkbox" 
      checked={checked} 
      onChange={() => setChecked(!checked)}
    />
  )
}

【讨论】：