你需要checked不是defaultChecked：

 <input type="checkbox" onChange={this.changeF} checked={this.state.checked} />

此外，在 React 类组件中定义方法/函数时，您应该了解this关键字。在changeF您上面定义的函数中，您尝试使用this.setState(). 但是，如果您实际上尝试在console.log(this)内changeF，则会得到undefined，因此您自然无法使用this.setState()

在内部，changeF我们需要以this某种方式将关键字指向您的组件，或者通过使用具有词法绑定的箭头函数，或者通过显式属于组件构造函数中的函数binding的this关键字changeF。

尝试changeF变成一个箭头函数，它将隐式地将this关键字绑定到组件的执行上下文：

  changeF = () => {
    this.setState({ checked: !this.state.checked });
  }

有关工作示例，请参见沙箱：https : //codesandbox.io/s/prod-http-t480z

具有讽刺意味的是，既然您对代码有了实用的答案，您现在可能有更多关于this. 它可以说是 JavaScript 中最令人困惑的话题。

这是了解this关键字的作弊指南。

注意：this几乎总是指最近的对象，它高于它/拥有它的级别。

让我们通过几个使用您的控制台的示例。

1. 印刷 this

   代码：console.log(this)

   结果：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

有一个全局窗口对象，当您在this没有任何包装对象的情况下简单地打印时，它会指向最近的一个。

2. this内打印function()

   代码：

   function printSomething(){
           console.log(this)
       }
   
       printSomething()
   

   结果：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

仍然this指向最近的对象。窗户。

3. this在function()对象内部的a内打印

   代码：

   function nestedThis(){
           let myObj = {
              getThis: function(){
                  console.log(this)
              }
           }
           return myObj
       }
   
       nestedThis().getThis()
   

   结果：{ getThis: ƒ}

好的！我们不再获取 window 对象了。相反， nowthis指的myObj是拥有它的对象。

现在了解为什么您的changeF功能不起作用：

  changeF() {
    this.setState({ checked: !this.state.checked });
  }

在 React 组件的上下文中，this关键字不会立即被赋予值。它不会固有地接收window对象，因此 React 组件有自己的执行范围。并且由于它无法找到object高于它的级别，因此在某种意义上this变得“迷失”。

作为一种解决方法，您将看到人们绑定他们的传统函数，以便this关键字指向组件上下文。

  constructor(props) {
    super(props);
    this.state = { checked: true };

    this.changeF = this.changeF.bind(this)
  }

注意：在构造函数中，this定义了关键字并且您可以访问所有类属性。

但是为什么箭头函数会 () => {}起作用呢？箭头函数有一种叫做词法范围的东西。这本质上只是意味着当您this在函数内部调用时，它将指向总体执行上下文。