javascript - React for孙子元素中的箭头语法和绑定(bind)问题

我正在尝试创建一个测试页，但无法使某些按钮正常工作。

import React from 'react'
import { Dropdown, Icon, Menu, Segment } from 'semantic-ui-react'

export class Page extends React.Component<any, any> {

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

    render() {
        return (
            <Header name='test' onCLick={this.handleIconClick}/>
        )
    }

    handleIconClick = () => {

        console.log('CLICKED');
        let visible = !this.state.sidebarVisible;
        this.setState({sidebarVisible: visible});

    }

}

export class Header extends React.Component<any, any> {

    constructor(props: any) {
        super(props);
        this.state = {
            iconName: this.props.visible ? 'angle double left' : 'angle double right'
        };
        console.log(this.props)
    }

    render() {
        return (
            <div>
                <Menu>
                    <Menu.Item onClick={this.props.onClick}>
                        <Icon name={this.state.iconName}/>
                    </Menu.Item>
                </Menu>
            </div>
        )
    }
}

在上面的示例中，我是从以下文档中获得的，在网上寻找解决方案等...甚至不允许我单击按钮（“ CLICKED”从未登录）。

当我改变

<Menu.Item onClick={this.props.onClick}>

至

<Menu.Item onClick={() => this.props.onClick()}>

我收到一条错误消息，指出：


  this.props.onClick不是函数


我花了很多时间在此上，因此将非常感谢您的帮助。

谢谢。

最佳答案

它与箭头语法无关。调用onCLick组件中的onClick组件时，您具有<Header />而不是<Page />。

更改如下：

<Header name='test' onClick={this.handleIconClick} />

希望对您有所帮助！

关于javascript - React for孙子元素中的箭头语法和绑定(bind)问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/60243508/