javascript - 简单的开/关切换组件不工作

Question

我在 React 中有一个简单的切换组件，我不太确定为什么它不起作用。另外，如果我使用箭头函数，我还需要 bind(this) 吗？

class MyComponent extends React.Component {
  construtor(props){
    super(props);
    this.state = {visibility: false};
  }

  toggleVisibility = () => {
    this.setState({
      visibility: !this.state.visibility
    });
  }

  render() {
    if(this.state.visibility) {
      return (
        <div>
          <button 
            onClick={this.toggleVisibility}>Click</button>
          <h1>now you see me</h1>
        </div>
      );
    } else {
      return(
      <div>
       <button 
         onClick={this.toggleVisibility}>Click</button>
      </div>
      );
    }
  }
};

ReactDOM.render(<MyComponent />, document.getElementById("root"));

Answer 1

你打错了。构造器c器，不是构造器。

constructor(props){
  super(props);
  this.state = {visibility: false};
}

修复了拼写错误后效果很好。