关于react的疑惑

关于react的疑惑_2

直接上代码

<script type="text/babel">
    class Buttons extends React.Component {
        constructor(props) {
            super(props);
            this.state = {button: true};
            this.handle = this.handle.bind(this);
        }
        handle() {
            this.setState((prevState) => ({
                button: !prevState.button
            }));
        }
        render() {
            return(
            <div>
                <button onClick={this.handle}>
                    {this.state.button?'ON': 'OFF'}
                </button>
            </div>)
        }
    }
    ReactDOM.render(
        <Buttons/>,
        document.getElementById('example')
    );
</script>

先说一下为什么函数handleClick要绑定this，

我是这样理解的因为调用handleClick是通过onClick调用的，而onClick是button的属性所以调用函数的时候this就会指向button

可是结果是我在handleClick里面加一个console.log（this），结果是输出undefined，？？？？？？？？？？？？？？？？？？？？？？？？？这是什么操作我也看不懂

还有一点就是为什么在onClick里面使用this.handle，this会指向react组件，？？？？？？？？？？？？？？？？，

按照我的理解是onClick是button的属性，那么在onClick里面使用的话this不应该指向button吗？？？？

希望以后可以知道这些疑惑

---------------------------------------------------------------------------------------------------------------------------------------------

2019.7.29

我发现对着抄react代码也是有风险的，因为没有抄对的话，console里是显示不出为什么错了，因为可能你抄错了，那么连整个网页都显示不出来就好像是没有网一样，

好直接上代码

源码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React 实例</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="example"></div>

<script type="text/babel">
class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    let button;

    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>
    );
  }
}

function UserGreeting(props) {
  return <h1>欢迎回来!</h1>;
}

function GuestGreeting(props) {
  return <h1>请先注册。</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      登陆
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      退出
    </button>
  );
}

ReactDOM.render(
  <LoginControl />,
  document.getElementById('example')
);
</script>

</body>
</html>

我抄的代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React 实例</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <!-- 生产环境中不建议使用 -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>

<div id="example"></div>
<div id="example2"></div>
<script type="text/babel">
    class LoginControl extends React.Component {
        constructor(props) {
            super(props);
            this.handleLoginClick = this.handleLoginClick.bind(this);
            this.handleLogoutClick = this.handleLogoutClick.bind(this);
            this.state = {isLoggedIn: false};
        }

        handleLoginClick() {
            this.setState({isLoggedIn: true});
        }

        handleLogoutClick() {
            this.setState({isLoggedIn: false});
        }

        render() {
            const isLoggedIn = this.state.isLoggedIn;
            let button;

            if(isLoggedIn) {
                button = <LoginControl onClick={this.handleLogoutClick}/>;
            }
            else {
                button = <LoginControl onClick={this.handleLoginClick}/>;
            }
            return (
                <div>
                    <Greeting isLoggedIn={isLoggedIn} />
                    {button}
                </div>
            );
        }
    }

    function UserGreeting(props) {
        return <h1>Hello</h1>;
    }
    function GuestGreeting(props) {
        return <h1>Register</h1>;
    }

    function Greeting(props) {
        const isLoggedIn = props.isLoggedIn;
        if(isLoggedIn) {
            return <UserGreeting/>;
        }
        return <GuestGreeting/>;
    }

    function LoginButton(props) {
        return (
            <button onClick={props.onClick}>
                登录
            </button>
        );
    }

    function LogoutButton(props) {
        return (
            <button onClick={props.onClick}>
                退出
            </button>
        );
    }

    ReactDOM.render(
        <LoginControl/>,
        document.getElementById('example')
    );

</script>
</body>
</html>

其实具体就是主要看script里的代码