Question

我正在学习使用igorprado's react-notification-system。

我关注了文档，并在顶级HTML元素上进行了设置，而另一个在我的主路由器文件上进行了设置。

Main.jsx

import NotificationSystem from 'react-notification-system';
this.state = { _notificationSystem: null };
componentDidMount() {
    this.setState({ _notificationSystem: this.refs.notificationSystem });
}

handleNotificationClick(title, message, level, position){
    this.state._notificationSystem.addNotification({
        title: title,
        message: message,
        level: level,
        position: position,
        autoDismiss: 15
    });
}
...
render(){
    return(
        <prop.component
            notification={this.handleNotificationClick}
        />
    )
}

Table.jsx

<Button 
    onClick={this.deleteRows} 
    onClick={()=>this.props.notification("Update", "Row Deleted", "info", "tr")}
</Button>

现在：

按钮单独与onClick事件一起使用。

问题：

如何具有多个onClick事件？
我可以在Table.jsx中添加addNotification（）吗？

谢谢。

Answer 1

有两种常见的方法可以运行多个onClick事件。

a）。单独的方法调用：-在此方法中，您可以通过将其包含在父函数中并在onClick事件中调用该父方法来调用要调用的多个事件。像这样：

parentMethod(event){
  deleteRows();
  this.props.notification("Update", "Row Deleted", "info", "tr");
}

<Button 
    onClick={this.parentMethod} 
</Button>

b）。内联方法：-在此方法中，您不必使用父函数来调用多个函数。在这里，您只需将它们添加在以分号分隔的同一onClick事件中。像这样：

<Button href="#" onClick={(event) => { deleteRows();  this.props.notification("Update", "Row Deleted", "info", "tr");}}></Button>

现在有关addnotification（）方法，您应该已经阅读了文档，并说“ addnotification（）”。这将根据您传递的对象显示通知。

希望有帮助

各种组件上的反应通知系统

1 个答案: