无法获取react-bootstrap组件点击事件target的value值

• 事件冒泡导致event.target指向不稳定：点击条目时，实际触发事件的目标可能是内部的<Col>、<strong>等子元素，这些元素未绑定对应value，所以返回undefined，只有点击到ListGroup.Item本身区域时才能拿到预期值。
• react-bootstrap 4.6的ListGroup.Item组件的value属性并非用于存储自定义业务数据，属于非标准属性，不会稳定挂载到生成的DOM节点上，取值可靠性低。

方案1（优先推荐）：直接传递ID参数 #

绑定点击事件时直接把对应产品ID作为参数传入处理函数，完全绕过事件对象取值的不稳定问题：

// 列表项绑定部分修改
<ListGroup.Item 
  action 
  onClick={() => select(eachProduct._id)} 
  className="product-item" 
  key={eachProduct._id}
>
        <Row>
            <Col>
                {eachProduct.name}
            </Col>
            <Col className="text-right">
                {eachProduct.isActive ?
                    <strong className="text-success">Active</strong>:
                    <strong className="text-danger">Inactive</strong>}
            </Col>
        </Row>
</ListGroup.Item> 

// 处理函数修改
const select = (productId) => {
   console.log(productId) // 稳定返回对应产品ID
}

方案2：使用currentTarget配合标准自定义属性 #

如果需要保留事件对象使用，使用event.currentTarget（永远指向事件绑定的元素本身）代替event.target，同时用HTML标准的data-*属性存储自定义值：

// 列表项绑定部分修改
<ListGroup.Item 
  action 
  onClick={select} 
  className="product-item" 
  key={eachProduct._id}
  data-product-id={eachProduct._id}
>
<!-- 内部内容不变 -->
</ListGroup.Item> 

// 处理函数修改
const select = (event) => {
   console.log(event.currentTarget.dataset.productId) // 稳定返回对应产品ID
}

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