почему флажок не установлен в реагировать js?

Question

Я использую react final form, но я не могу checked checkbox. Я не знаю, что я делаю не так. Вот мой код

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

Как упомянуто @Sirwan. ваш !!undefined всегда возвращается false

Попробуйте использовать useState hook

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

Answer 2

Это потому, что свойство checked вашего SForm.Checkbox получает 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>
  );
};