Question

请问我目前正在显示商家阵列的商家列表。每个企业都有自己独特的ID。我通过反应＆＃34;名片组件＆＃34;映射我的业务数组来展示业务。这张卡是一张小型物化卡，显示了很少的业务属性。

获取特定企业的完整详细信息的API端点是＆lt; url / businesses / id＆gt; 在每张名片上，我都有一个按钮，上面写着＆＃34;访问＆＃34;，这样当用户点击按钮时，他会向url / business / id发送请求，当请求成功时，我会更新使用redux进行状态并呈现将呈现业务详情的BusinessProfile页面。

我的方法是将url / business /与业务ID连接起来并发送请求。但我不知道如何从＆＃34;访问＆＃34;访问业务ID。按钮。

 const FoundBusinesses = realBusiness.map((eachBusiness, index) => {
        return (
            <BusinessCard key={index}
                business={eachBusiness}
                businessPic={profilePicture}
                handleClick={this.handleClick}
            />
        )
    })

我将不胜感激任何帮助

Answer 1

如果'访问'按钮在BusinessCard中，你应该已经在eachBusiness.businessId中有id，对吗？如果我正确理解您的问题，您可以将其传递给您的handleclick功能并更改URL。以下代码使用react-router的历史记录来更改URL。

按钮内有箭头功能

HandleClick：

handleClick(businessId) {
  this.props.history.push(`url/businesses/${businessId}`)
}

Inside BusinessCard：

<button onClick={() => this.props.handleClick(this.props.business.businessId)}>
  See business info
</button>

HandleClick会在执行时使用该特定ID，因此它会推送到正确的URL。

带闭包

您也可以使用闭包进行更清晰的函数调用：

handleClick(businessId) {
  return () => this.props.history.push(`url/businesses/${businessId}`)
}

Inside BusinessCard：

<button onClick={this.props.handleClick(this.props.business.businessId)}>
  See business info
</button>

Answer 2

handleClick={() => {this.handleClick(business.id)}

此链接也很好，它向您展示了如何将数据作为参数发送到您的点击处理程序。 https://medium.freecodecamp.org/reactjs-pass-parameters-to-event-handlers-ca1f5c422b9

如何将视图按钮附加到项目列表

2 个答案:

按钮内有箭头功能

带闭包