签入React JS复选框是否处于活动状态

Question

我写了下一个代码：

class Data extends React.Component {
  constructor(props) {
    super(props);
    this.state = { checked: true };
  }
  changeF() {
    this.setState({ checked: !this.state.checked });
  }
  render() {
    var message;
    if (this.state.checked) {
      message = "checked";
    } else {
      message = "UNchecked";
    }
    return (
      <div>
        <p> i: {message}</p>
        <input
          type="checkbox"
          onChange={this.changeF}
          defaultChecked={this.state.checked}
        />
      </div>
    );
  }
}
var doc = document.getElementById("content");
ReactDOM.render(<Data />, doc);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

当我将选中复选框时，它应显示为“已选中”，如果未选中则为“未选中”。谁能解释，为什么该应用程序无法正常工作？

Answer 1

您需要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关键字指向您的组件，方法是使用带有词法绑定的箭头功能， OR 通过显式{{ 1}} binding关键字属于组件构造函数中的this函数。

尝试将changeF变成箭头功能，它将把changeF关键字隐式绑定到组件的执行上下文：

this

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

具有讽刺意味的是，既然您已经为代码提供了一个实用的答案，那么现在您可能对 changeF = () => { this.setState({ checked: !this.state.checked }); } 还有更多的问题。可以说这是JavaScript中最令人困惑的话题。

以下是骗子指南，以了解this关键字。

注意：this几乎总是指位于其上方/拥有它的物体附近的最近物体。

让我们使用您的控制台查看几个示例。

1. 打印this

   代码：this

   结果：console.log(this)

有一个全局窗口对象，当您仅打印Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}而没有任何包装对象时，它指向最近的对象。

1. 在this内打印this

   代码：

   function()

   结果：function printSomething(){ console.log(this) } printSomething()

仍然，Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}指向最近的对象。窗口。

1. 在对象内部的this中打印this

   代码：

   function()

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

好！我们不再获得window对象了。相反，现在{ getThis: ƒ}指向拥有它的对象this。

现在了解为什么您的myObj函数不起作用：

changeF

在React组件的上下文中，不会立即为 changeF() { this.setState({ checked: !this.state.checked }); } 关键字提供一个值。它不会固有地接收this对象，因此React组件具有自己的执行范围。并且由于无法在其上一级找到window，因此在某种意义上object变得“丢失”。

作为一种解决方法，您会看到人们绑定了其传统功能，因此this关键字指向组件上下文。

this

注意：在构造函数中，定义了 constructor(props) { super(props); this.state = { checked: true }; this.changeF = this.changeF.bind(this) } 关键字，您可以访问所有类属性。

但是，为什么箭头功能 this可以正常工作呢？好的箭头函数有一个词法作用域。这实际上只是意味着，当您在函数内部调用() => {}时，它将指向总体执行上下文。