Javascript 如何为同一事件传递不同的事件处理程序？

我有一个react原生组件，它呈现了两个图标，分别用于标记收藏夹和撰写评论，如下所示：

function RenderDish(props) {
const dish = props.dish;

if (dish != null) {
    return (
        <Card featuredTitle={dish.name} image={{ uri: baseUrl + dish.image }}>
            <Text style={{ margin: 10 }}>
                {dish.description}
            </Text>
            <View style={{ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
                <Icon raised reverse name={props.favorite ? 'heart' : 'heart-o'} type='font-awesome' color='#f50'
                    onPress={() => props.favorite ? console.log('Aleady Favorite') : props.onFavorite()} />
                <Icon raised reverse name='pencil' type='font-awesome' color='#3b5998'
                    onPress={() => props.onComment()} />
            </View>
        </Card>
    );
}
else {
    return (<View></View>);
}} 

<RenderDish dish={this.props.dishes.dishes[+dishId]}
                favorite={this.props.favorites.some(el => el === dishId)}
                onFavorite={() => this.markFavorite(dishId)}
                onComment={() => this.toggleModal()} />  

函数渲染器（道具）{
const dish=道具盘；
if（dish！=null）{
返回(
{dish.description}
props.favorite？console.log（'Aleady favorite'）：props.onFavorite（）}/>
props.onComment（）}/>
);
}
否则{
返回（）；
}} 

我从外部组件调用此功能组件，如下所示：

function RenderDish(props) {
const dish = props.dish;

if (dish != null) {
    return (
        <Card featuredTitle={dish.name} image={{ uri: baseUrl + dish.image }}>
            <Text style={{ margin: 10 }}>
                {dish.description}
            </Text>
            <View style={{ display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center" }}>
                <Icon raised reverse name={props.favorite ? 'heart' : 'heart-o'} type='font-awesome' color='#f50'
                    onPress={() => props.favorite ? console.log('Aleady Favorite') : props.onFavorite()} />
                <Icon raised reverse name='pencil' type='font-awesome' color='#3b5998'
                    onPress={() => props.onComment()} />
            </View>
        </Card>
    );
}
else {
    return (<View></View>);
}} 

<RenderDish dish={this.props.dishes.dishes[+dishId]}
                favorite={this.props.favorites.some(el => el === dishId)}
                onFavorite={() => this.markFavorite(dishId)}
                onComment={() => this.toggleModal()} />  

el==dishId）}
onFavorite={（）=>this.markFavorite（dishId）}
onComment={（）=>this.toggleModal（）}/>

---

我已经实现了

toggleModal（）

和

markFavorite（）

方法，一切都按预期运行，但是我的问题是：有没有其他方法可以通过单个道具传递2个或更多不同的事件处理程序？例如，有没有办法说：

handler1和handler2}

。或者，除了我所做的之外，还有什么优雅的选择吗（如果我有5个按钮，我需要5个道具：（）？

您可以在单个函数中使用处理程序，并在onPress中调用该函数。 或者只是

---

尝试下面的方法。将处理程序方法作为对象传递到props中

function Button(props) {
  return (
    <div>
      <button type="button" onClick={props.onPress.handler1} >Handler1</button>
      <button type="button" onClick={props.onPress.handler2} >Handler2</button>
    </div>

  );
}


class Home extends Component {


  handler1() {
    console.log('handler 1');
  }

  handler2() {
    console.log('handler 2');
  }


  render() {
    return (
      <div>
        <Button onPress={{ handler1: this.handler1, handler2: this.handler2 }} />
      </div>
    )
  }
}

功能按钮（道具）{
返回(
Handler1
Handler2
);
}
类Home扩展组件{
handler1（）{
log（'handler 1'）；
}
handler2（）{
log（'handler 2'）；
}
render（）{
返回(
)
}
}

您这样做的方式可能是最常见的，也是完全可以接受的

如果只有几个处理程序（并且它们没有被深入地传递），这通常不是问题

你可以将它们捆绑到一个对象和单个道具中，但我通常不认为这样做有什么好处

您还可以将多个道具作为单个排列对象传递，而无需将它们捆绑到单个道具中

如果你开始得到一个比你满意的更多的处理程序，那么这可能是一个很好的时间来看看你是如何处理你的状态管理的。你可能会更好地使用一个减速机，并在这一点上调度操作

---

更新 关于代码的其他一些注意事项：

你可以解构道具以便于使用

如果没有内容，

视图

不需要单独的结束标记

如果只是调用另一个箭头函数，则不必为事件处理程序创建新的箭头函数。只需将其设置为第一个箭头函数即可

考虑三元函数以允许隐式返回

函数renderish（{dish，favorite，onFavorite，onComment}）=>
盘
?   
{dish.description}
收藏夹？console.log（'Aleady favorite'）：onFavorite（）}/>
:   

---

我会更多地关注这些项目，而不是捆绑这两个函数。

你能详细说明一下吗？当相应的事件发生时，我如何只调用其中一个呢？onPress={（e）=>myFunction（e）}myFunction=（e）=>{if（e.target.id=='firstEventId'）{}else}