reactjs - 如何使传递给子组件的 onClick 事件在 React 中工作

Question

我有一个子组件：

const MenuItem = ({
    children,
    className,
    onClick
}) => (
    <li
        className={classNames(
            styles.menuItem,
            styles.hoverable,
            className
        )}
        onClick={onClick}
    >
        {children}
    </li>
);

MenuItem.propTypes = {
    children: PropTypes.node,
    className: PropTypes.string,
    onClick: PropTypes.func
};

我有一个父亲组件：

 <MenuBarMenu
                            className={classNames(styles.menuBarMenu)}
                            open={this.state.historyDropdownStatus}
                            place={this.props.isRtl ? 'left' : 'right'}
                        >
                            {this.props.historyList.map(item =>
                                (
                                    <MenuItem
                                        key={item.id}
                                        // eslint-disable-next-line react/jsx-no-bind
                                        onClick={() => {
                                            this.handleClickHistoryItem(item.id);
                                        }}
                                    >
                                        {item.name}
                                    </MenuItem>
                                ))}
                        </MenuBarMenu>

我也定义handleClickHistoryItem并绑定到这个

 constructor (props) {
        super(props);
        this.state = {
            historyDropdownStatus: false
        };
        bindAll(this, [
            'handleClickHistoryItem'
        ]);
    }
    handleClickHistoryItem (id) {
        console.log('a');
    }

其实类似这段代码的代码都可以触发，但是只有这一项失败了。我根据stackoverflow上的答案尝试了很多方法，但仍然没有奏效。

标签： reactjs