关于react的疑惑

Posted 2022-05-20 wildsky

直接上代码

<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吗？？？？

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