ReactJS：如何将子组件选择结果传回父组件并绑定子元素函数？

嘿，我来帮你搞定这两个React组件的问题！咱们一步一步来：

React里子组件向父组件传数据的核心思路就是父组件给子组件传一个回调函数，子组件触发这个函数并把要传递的数据带过去。具体到你的场景，这么做：

首先在父组件CompanyList.js里定义一个处理选择的函数，然后把它作为props传给DropdownMenu：

// CompanyList.js
import React, { Component } from 'react';
import DropdownMenu from './DropdownMenu';

class CompanyList extends Component {
  handleSelect = (selectedValue) => {
    // 这里拿到子组件传过来的选择数据，做你需要的逻辑
    console.log('选中的值：', selectedValue);
    // 比如更新父组件的state
    this.setState({ selectedItem: selectedValue });
  };

  render() {
    return (
      <div>
        <DropdownMenu onSelect={this.handleSelect}>
          <li value="company1">公司A</li>
          <li value="company2">公司B</li>
          <li value="company3">公司C</li>
        </DropdownMenu>
      </div>
    );
  }
}

export default CompanyList;

然后在子组件DropdownMenu里，当用户点击选项时，调用父组件传过来的onSelect回调，把选中的数据传回去：

// DropdownMenu.js
import React, { Component } from 'react';

class DropdownMenu extends Component {
  selectItem = (value) => {
    // 调用父组件的回调，传递选中值
    if (this.props.onSelect) {
      this.props.onSelect(value);
    }
  };

  // 后面会讲怎么给children绑定这个selectItem函数
  // ...
}

export default DropdownMenu;

直接给this.props.children绑定事件是行不通的，因为children已经是渲染好的React元素了。我们需要用React.cloneElement来克隆每个子元素，给它们添加onClick事件，同时把对应的选中值传进去。

另外还要处理“部分下拉框无选项仅为按钮”的情况，我们可以先判断子元素的类型或者数量，灵活处理：

更新DropdownMenu的render方法：

// DropdownMenu.js
render() {
  // 把children转换成数组（如果是单个元素的话也能处理）
  const menuItems = React.Children.map(this.props.children, (child) => {
    // 只给<li>绑定事件，如果是按钮的话可以单独处理
    if (child.type === 'li') {
      // 克隆<li>，添加onClick事件，同时把它的value或者文本作为选中值
      const selectedValue = child.props.value || child.props.children;
      return React.cloneElement(child, {
        onClick: () => this.selectItem(selectedValue)
      });
    }
    // 如果是按钮（比如<button>），直接返回或者也绑定事件（看你需求）
    return child;
  });

  return (
    <div className="dropdown-menu">
      {menuItems}
    </div>
  );
}

这样不管是带<li>选项的下拉框，还是仅作为按钮的下拉框，都能处理：

• 有<li>的情况：每个<li>都会被克隆并绑定onClick，点击时触发selectItem，把值传给父组件的handleSelect
• 仅按钮的情况：父组件可以直接给按钮绑定自己的点击事件，或者你也可以在DropdownMenu里给按钮统一绑定逻辑，看你的需求

另外要注意，如果你的children是嵌套结构，可能需要递归处理，但一般下拉框的选项都是平级的<li>，上面的代码足够用了。

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