React.js点击按钮时无法获取对应button的value值问题求助

• 事件冒泡触发目标偏差：你的button内部嵌套了<span>标签，当点击位置落在<span>上时，e.target指向的是<span>元素而非外层<button>，<span>没有value属性，所以返回undefined。
• 属性不统一：服装、用品两个分类按钮没有设置value属性，只写了title属性，即便拿到button元素也读不到value值。
• 接口请求逻辑硬编码：当前不管拿到什么按钮值，都固定请求/data/MainProductsShoes.json，没有和按钮值关联，后续分类切换也不会生效。

1. 替换取值对象：把事件处理函数里的e.target改成e.currentTarget，e.currentTarget永远指向绑定了onClick事件的元素，也就是你要的<button>，不受内部子元素点击影响，同步修改动态请求逻辑：

updateProducts = e => {
    let buttonValue = e.currentTarget.value;
    console.log(buttonValue);
    // 按实际的后端接口/本地json路径调整映射关系即可
    const apiMap = {
        viewAll: '/data/MainProducts.json',
        shoes: '/data/MainProductsShoes.json',
        clothing: '/data/MainProductsClothes.json',
        acc: '/data/MainProductsSupplies.json'
    }
    fetch(apiMap[buttonValue], {})
      .then(res => res.json())
      .then(data => {
        this.setState({
          productsInfo: data,
        });
      });
};

2. 补全按钮属性：给服装、用品两个按钮补上对应的value属性，和apiMap的key对应：

<div className="Clothes">
  <button onClick={this.updateProducts} value="clothing">
    <span>服装</span>
  </button>
</div>
<div className="Supplies">
  <button onClick={this.updateProducts} value="acc">
    <span>用品</span>
  </button>
</div>

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