问题

Question

问题

我试图理解为什么单击列表中的项目时， navItemClick 下面的事件处理程序不会触发到控制台。另外，我试图弄清楚是否可以将onClick事件添加到NavigationSidebarItem函数中，以减少在NavigationSidebar组件中返回的每个项目上重复它。

组件正确呈现;没有错误。我也能够看到构造函数的控制台行以及JSX加载成功。只是没有clicky clicky消息！

代码示例

class NavigationSidebar extends React.Component {
    constructor(props) {
        super(props);
        this.navItemClick = this.navItemClick.bind(this);
        console.log('NavigationSidebar:constructor => success');
    }

    navItemClick(event)
    {
        console.log('this.navItemClick: clicked');
    }

    render()
    {
        return (
                <ul>
                    <NavigationSidebarItem description="Item1" onClick={this.navItemClick} />
                    <NavigationSidebarItem description="Item2" onClick={this.navItemClick} />
                    <NavigationSidebarItem description="Item3" onClick={this.navItemClick} />
                </ul>
        )
    }
};

function NavigationSidebarItem(props) {
    return (
        <li>
            <span>{props.description}</span>
        </li>
    );
}

ReactDOM.render(
    <NavigationSidebar/>,
    document.getElementById('navigation-sidebar')
);

console.log('NavigationSidebar.jsx:loaded => finished');

Answer 1

您可能会混淆REACT组件和用JSX编写的DOM元素（组件内）之间的用法/关系。

当您将onClick绑定到<NavigationSidebarItem />时，您实际正在做的是将prop传递给名为<NavigationSidebarItem />的功能组件props.onClick。这与将onclick事件附加到DOM元素不同。

您应该将onClick handler传递给该组件，此时您将props.<yourOnClickEventHandle>提供给<NavigationSidebarItem />。

然后，您需要在onClick函数中的所需DOM元素上创建render，这将把它绑定到DOM元素。

为避免在返回代码时出现混淆，您不应使用属性名称onClick，因为它可能会在以后混淆您。说出你的意思/打算使用熟悉的结构标记所有事件处理程序。例如showMeKittensHandle（Handle是操作词，而不是小猫）。

class NavigationSidebar extends React.Component {
    constructor(props) {
        super(props);
        this.navItemClickHandle = this.navItemClick.bind(this);
        console.log('NavigationSidebar:constructor => success');
    }

    navItemClickHandle(event)
    {
        console.log('this.navItemClick: clicked');
    }

    render()
    {
    console.log(this.navItemClick)
        return (
                <ul>
                    <NavigationSidebarItem description="Item1" navItemClickHandle={this.navItemClickHandle} />
                    <NavigationSidebarItem description="Item2" navItemClickHandle={this.navItemClickHandle} />
                    <NavigationSidebarItem description="Item3" navItemClickHandle={this.navItemClickHandle} />
                </ul>
        )
    }
};

function NavigationSidebarItem(props) {
    return (
        <li onClick={props.navItemClickHandle}>
            <span>{props.description}</span>
        </li>
    );
}

ReactDOM.render(
    <NavigationSidebar/>,
    document.getElementById('navigation-sidebar')
);

console.log('NavigationSidebar.jsx:loaded => finished');

示例：https://jsfiddle.net/69z2wepo/189598/

Answer 2

您可以像这样绑定点击：

const yourFunction = (arg) => console.log(arg);

<C onClick={(event) => yourFunction('Hello')} />

单击时

将记录Hello;

React.js onClick事件未触发

问题

代码示例

2 个答案: