为什么在反应 js 中没有选中复选框？

Question

我正在使用 react final form 但我无法 checked checkbox。我不知道我做错了什么。这是我的 Code

const AppWithIconToggle = ({ input }) => {
  console.log("ddd", !!input.value);
  return (
    <div>
      <SForm.Checkbox
        checked={!!input.value}
        name={input.name}
        toggle
        onChange={(e, { checked }) => input.onChange(checked)}
      />
    </div>
  );
};

Answer 1

因为你的SForm.Checkbox的checked属性收到了undefined。您传递的是未定义的错误属性 (input.value)，因此 !!undefined 始终是 false。将其更改为 input.checked 然后它按预期工作：

const AppWithIconToggle = ({ input }) => {
  return (
    <div>
      <SForm.Checkbox
        checked={!!input.checked}
        name={input.name}
        toggle
        onChange={(e, { checked }) => input.onChange(checked)}
      />
    </div>
  );
};

Answer 2

正如@Sirwan 提到的。你的 !!undefined 总是 return false

尝试使用 useState 钩子

// import 'useState'
import React, { useState } from "react"

const AppWithIconToggle = ({ input }) => {
  // initial check value is 'false'
  const [checked, setChecked] = useState(false)
  console.log(checked)
  return (
    <div>
      <SForm.Checkbox
        checked={checked} // checked value
        name={input.name}
        toggle
        onChange={() => setChecked(!checked)} // toggle checked value onChange
      />
    </div>
  )
}

检查你的codeSandbox

为什么在反应 js 中没有选中复选框？

why checkbox is not checked in react js?

javascript

reactjs

semantic-ui

semantic-ui-react

react-final-form