使用react-ripples封装的MyButton1组件绑定onClick不生效如何解决？

问题根因 #

你在父组件给MyButton1绑定的onClick只是作为普通属性传入自定义组件，你没有将该事件绑定到MyButton1内部的可点击元素上，因此点击时无法触发回调。

修复方法 #

修改MyButton1组件代码，将接收的onClick属性传递给内部的Button组件即可：

export const MyButton1 = (props) => {
    return (
        <Ripples color="rgba(255,255,255,0.5)" during={650}>
            <Button className='my-button-1' onClick={props.onClick}>
                {props.children}
            </Button>
        </Ripples>
    );
}

优化建议 #

如果后续需要给MyButton1传入更多原生按钮属性（比如disabled、type等），可以直接透传所有props，不需要逐个单独声明：

export const MyButton1 = (props) => {
    return (
        <Ripples color="rgba(255,255,255,0.5)" during={650}>
            <Button className='my-button-1' {...props}>
                {props.children}
            </Button>
        </Ripples>
    );
}

如果点击后出现页面意外刷新的情况，是因为按钮默认触发了表单提交行为，可以给Button添加type="button"属性，或者在register回调中调用e.preventDefault()阻止默认行为。

内容的提问来源于stack exchange，提问作者Thanh Hải