如何在父组件ButtonGroup中获取子组件ButtonItem点击时的Props

我来帮你解决这个问题——要在父组件的clicky方法里拿到子组件的caption和disabled属性，核心在于：父组件div上的点击事件是通过事件委托触发的，直接从event.target只能拿到DOM元素的信息，没法直接获取子组件的props。下面给你几种实用的实现方案：

方案一：子组件主动传递props（推荐，符合React设计理念） #

让子组件的按钮自己绑定点击事件，然后把需要的属性通过回调函数传递给父组件。

首先修改父组件，我们需要遍历子组件，把回调方法传递给每个子组件：

// ButtonGroup组件（父组件）
class ButtonGroupComponent extends React.Component {
  // 接收子组件传递的按钮信息
  handleButtonClick = (caption, disabled) => {
    console.log("被点击的按钮：", caption, "是否禁用：", disabled);
    // 这里可以做你需要的逻辑处理
  }

  render() {
    // 克隆子组件，给每个子组件添加回调props
    const childrenWithCallback = React.Children.map(this.props.children, child => {
      return React.cloneElement(child, {
        onButtonClick: this.handleButtonClick
      });
    });

    return (
      <div>
        {childrenWithCallback}
      </div>
    )
  }
}

然后修改子组件buttonItem，给按钮绑定点击事件，调用父组件传递来的回调：

// buttonItem组件
class ButtonItem extends React.Component {
  handleClick = () => {
    const { caption, disabled, onButtonClick } = this.props;
    // 把当前组件的props传递给父组件
    onButtonClick(caption, disabled);
  }

  render() {
    return (
      <button 
        disabled={this.props.disabled} 
        onClick={this.handleClick}
      >
        {this.props.caption}
      </button>
    )
  }
}

这样点击任意子组件按钮时，父组件就能拿到对应的caption和disabled属性了，这是React组件间通信的标准方式，逻辑清晰且易于维护。

方案二：利用自定义DOM属性（快速兼容现有代码） #

如果不想修改子组件的事件逻辑，也可以把caption和disabled作为自定义属性挂载到DOM按钮上，然后在父组件的点击事件里读取。

修改子组件的render方法，添加data-前缀的自定义属性：

// buttonItem组件
render() {
  return (
    <button 
      disabled={this.props.disabled}
      data-caption={this.props.caption}
      data-disabled={this.props.disabled.toString()}
    >
      {this.props.caption}
    </button>
  )
}

然后父组件的clicky方法可以这样获取数据：

// ButtonGroup组件的clicky方法
clicky = (e) => {
  // 确保点击的是按钮元素
  if (e.target.tagName === "BUTTON") {
    const caption = e.target.dataset.caption;
    // 注意dataset里的值都是字符串，需要转成布尔值
    const disabled = e.target.dataset.disabled === "true";
    console.log("被点击的按钮：", caption, "是否禁用：", disabled);
  }
}

这种方式不需要改动太多现有代码，但要注意自定义属性必须用data-前缀，而且布尔值需要手动做类型转换，适合快速兼容的场景。

方案三：使用Ref（不推荐，仅作参考） #

你也可以给每个子组件添加Ref，然后在父组件里通过Ref获取子组件的props，但这种方式灵活性很差，尤其是当子组件数量动态变化时，维护成本极高，所以一般不推荐使用这个方案，这里只做简单示例：

// ButtonGroup组件（父组件）
class ButtonGroupComponent extends React.Component {
  childRefs = [];

  clicky = (e) => {
    // 找到点击的按钮对应的子组件实例
    const clickedButton = e.target;
    const childIndex = Array.from(this.divRef.children).indexOf(clickedButton);
    const childProps = this.childRefs[childIndex].props;
    console.log(childProps.caption, childProps.disabled);
  }

  render() {
    const childrenWithRefs = React.Children.map(this.props.children, (child, index) => {
      return React.cloneElement(child, {
        ref: (el) => this.childRefs[index] = el
      });
    });

    return (
      <div ref={el => this.divRef = el} onClick={this.clicky}>
        {childrenWithRefs}
      </div>
    )
  }
}

总结一下，方案一是最推荐的，符合React的组件通信设计原则；方案二适合快速修改现有代码的场景；方案三尽量避免使用，除非特殊情况。

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