时间戳

首页 > 解决方案 > 如何将单个按钮用于两个目的

reactjs - 如何将单个按钮用于两个目的

问题描述

我为一个带有动画效果的按钮制作了一个组件，这样我就可以通过简单地导入它来在我的其他组件中使用它。我在 Button 组件中为动画做了很多代码，所以我不想在其他组件中一次又一次地使用很多相同的代码。

有什么方法可以通过导入来将 Button 用于不同的事件。例如; 在一个组件中，我导入Button作为提交用户信息，而在另一个组件中，我导入Button以显示用户数据。

标签： reactjsreact-native

解决方案

当然！这是组件的想法。您可能希望在您的 Button 中接收一个道具来处理 onClick 发生的任何事情。

IE

父组件创建特定的函数来处理

function handleClick() { ... }

<YourCustomButton onClick={handleClick} />

在 YourCustomButton 中，只需在事件中使用此功能

class YourCustomButton extends React......

<Button onClick={this.props.onClick}> ...

推荐阅读