ReactJS中如何为每个商品添加点击事件触发alert展示商品描述？

你只需要修改Products.js组件，在其中添加按钮并正确绑定点击事件即可，现有其他文件无需改动，修改后的代码如下：

import React from "react"

function Products(props){
  return(
    <div className="list">
        <h3>{props.product.name}</h3>
        <p style={{color: props.product.price >= 10 ? "red" : "yellow"}}>价格：${props.product.price}</p>
        <p>{props.product.description}</p>
        {/* 新增按钮，绑定点击事件 */}
        <button onClick={() => alert(props.product.description)}>查看商品描述</button>
        <hr/>
    </div>
  )
}

export default Products

注意事项 #

点击事件需要传递函数引用而非函数执行结果，如果直接写onClick={alert(props.product.description)}，组件渲染时就会直接弹出提示，达不到点击触发的效果，所以需要用箭头函数包裹执行逻辑。

可选优化方案 #

如果后续业务逻辑复杂，希望把事件处理逻辑统一放在父组件App中，可以按如下方式修改：

1. 修改App.js，新增处理函数并通过props传递给子组件：

import React from 'react'
import productsData from "./vschoolProducts"
import Products from "./Products"

function App(){
  // 统一处理商品描述弹出逻辑
  const showProductDesc = (desc) => {
    alert(desc)
  }
  const productsComponent = productsData.map(item => <Products key={item.id} product={item} showDesc={showProductDesc} />);

  return (
    <div>
      {productsComponent}
    </div>
  );
}

export default App

2. 修改Products.js，调用父组件传递的方法：

<button onClick={() => props.showDesc(props.product.description)}>查看商品描述</button>

内容的提问来源于stack exchange，提问作者iNfam0usColors