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

【问题标题】：why checkbox is not checked in react js?为什么没有在反应js中选中复选框？
【发布时间】：2020-01-14 15:44:56
【问题描述】：

我正在使用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>
  );
};

【问题讨论】：

标签： javascript reactjs semantic-ui semantic-ui-react react-final-form

【解决方案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>
  );
};

【讨论】：

【解决方案2】：

正如@Sirwan 提到的。你的!!undefined 总是返回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

【讨论】：