将多个 onclick 处理函数传递给子组件

Question

我在下面有一些代码可以说明这个问题。我想将两个 handleClick 函数传递给子组件。

问题是每个处理程序都会从单独的按钮元素触发。我不需要同时触发这两个功能。

我试过将这两个函数放在一个 handlerClickOneAndTwo 函数中，但这是不正确的，因为我不希望该单个函数触发两个处理程序。

如何将这两个处理函数发送到子组件？

    const handleClickOne = (e) => {
        //some handler logic
        }));
    };

    const handleClickTwo = (e) => {
        //some handler logic
    };

    return (
        <ChildComponent
            onClick={handleClickOne}
    //I also want to handleClickTwo here but it will trigger from a different button
        />
    );
}

Answer 1

为不同的onClick传递不同的道具。像这样：

const handleClickOne = (e) => {
        //some handler logic
        }));
    };

    const handleClickTwo = (e) => {
        //some handler logic
    };

    return (
        <ChildComponent
            onClick1={handleClickOne}
            onClick2={handleClickTwo}
        />
    );

并在您的子组件中根据您的要求分配这些

将多个 onclick 处理函数传递给子组件

Pass multiple onclick handler functions to child component

event-handling

reactjs

react-props