React父组件如何获取Office Fabric Dropdown的selectedKey

你已经走对了第一步——用componentRef获取子组件实例！接下来咱们分两种常用方案来实现父组件获取Dropdown的选中值，一种是通过ref调用子组件暴露的方法，另一种是更符合React数据流的回调函数方式，你可以按需选择：

方案一：通过componentRef调用子组件暴露的方法 #

1. 修改ChildView，跟踪选中状态并暴露获取方法 #

首先咱们需要让ChildView能实时拿到Dropdown的选中值，同时把这个值暴露给父组件。先给ChildView添加Dropdown的ref，并且监听onChange更新本地state，最后写一个公共方法返回选中的key：

import { Dropdown } from 'office-ui-fabric-react';

export class ChildView extends React.Component<any, IChildView> {
  // 保存Dropdown的ref
  private _dropdownRef = React.createRef<Dropdown>();

  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "1",
      selectedText: "one - 1",
      items: this._getItems()
    };
  }

  componentDidMount() {
    console.log('component did mount');
  }

  private _getItems() {
    return [
      { key: '1', text: 'one - 1' },
      { key: '2', text: 'two - 2' },
      { key: '3', text: 'three - 3' },
      { key: '4', text: 'four - 4' },
      { key: '5', text: 'five - 5' },
      { key: '6', text: 'six - 6' },
      { key: '7', text: 'seven - 7' },
      { key: '8', text: 'eight - 8' },
      { key: '9', text: 'nine - 9' },
      { key: '10', text: 'ten - 10' },
    ];
  }

  // 暴露给父组件的方法，返回当前选中的key
  public getSelectedDropdownKey() {
    // 两种方式都可以：从state拿（因为onChange已经更新了），或者从Dropdown的ref拿
    return this.state.selectedKey;
    // 或者 return this._dropdownRef.current?.selectedKey;
  }

  public render() {
    return (
      <Dropdown
        selectedKey={this.state.selectedKey} // 改成受控组件，用state控制选中值
        options={this.state.items}
        onChange={(event, item) => {
          // 选中变化时更新本地state
          this.setState({
            selectedKey: item.key,
            selectedText: item.text
          });
        }}
        ref={this._dropdownRef} // 绑定Dropdown的ref
      />
    );
  }
}

2. 在ParentView中通过ref调用方法获取值 #

现在你可以在ParentView里通过componentRef拿到ChildView的实例，然后在需要的地方（比如按钮点击、生命周期钩子）调用暴露的方法：

import { ChildView } from './ChildView';

export default class ParentView extends React.Component<any, IParentView> {
  // 存储子组件实例的ref
  private _childViewRef: ChildView | null = null;

  constructor(props) {
    super(props);
  }

  // 示例：点击按钮获取选中值
  private _handleGetSelectedKey = () => {
    if (this._childViewRef) {
      const selectedKey = this._childViewRef.getSelectedDropdownKey();
      console.log('子组件Dropdown选中的key:', selectedKey);
      // 这里可以把选中值存入父组件state或者做其他处理
    }
  };

  public render(): React.ReactElement<IParentViewProps> {
    return (
      <div>
        <ChildView componentRef={(ref) => this._childViewRef = ref} />
        <button onClick={this._handleGetSelectedKey}>获取选中值</button>
      </div>
    );
  }
}

方案二：通过props回调实现（推荐，符合React单向数据流） #

这种方式不需要用ref，而是让子组件在选中变化时主动通知父组件，更符合React的设计理念：

1. 修改ChildView，接收父组件的回调props #

先给ChildView的props添加一个回调函数类型：

// 定义ChildView的props类型
interface IChildViewProps {
  onSelectChange?: (selectedKey: string) => void;
}

export class ChildView extends React.Component<IChildViewProps, IChildView> {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "1",
      selectedText: "one - 1",
      items: this._getItems()
    };
  }

  private _getItems() {
    return [
      { key: '1', text: 'one - 1' },
      { key: '2', text: 'two - 2' },
      { key: '3', text: 'three - 3' },
      { key: '4', text: 'four - 4' },
      { key: '5', text: 'five - 5' },
      { key: '6', text: 'six - 6' },
      { key: '7', text: 'seven - 7' },
      { key: '8', text: 'eight - 8' },
      { key: '9', text: 'nine - 9' },
      { key: '10', text: 'ten - 10' },
    ];
  }

  public render() {
    return (
      <Dropdown
        selectedKey={this.state.selectedKey}
        options={this.state.items}
        onChange={(event, item) => {
          const newSelectedKey = item.key;
          this.setState({
            selectedKey: newSelectedKey,
            selectedText: item.text
          });
          // 选中变化时调用父组件传递的回调，把选中值传回去
          this.props.onSelectChange?.(newSelectedKey);
        }}
      />
    );
  }
}

2. 在ParentView中接收回调并更新状态 #

父组件传递回调函数，实时获取子组件的选中值：

export default class ParentView extends React.Component<any, IParentView> {
  constructor(props) {
    super(props);
    this.state = {
      childDropdownSelectedKey: "1" // 初始化和子组件默认值一致
    };
  }

  // 接收子组件传递的选中值，更新父组件state
  private _handleChildSelectChange = (selectedKey: string) => {
    this.setState({ childDropdownSelectedKey: selectedKey });
    console.log('子组件Dropdown选中的key:', selectedKey);
  };

  public render(): React.ReactElement<IParentViewProps> {
    return (
      <div>
        <ChildView onSelectChange={this._handleChildSelectChange} />
        <p>当前选中值：{this.state.childDropdownSelectedKey}</p>
      </div>
    );
  }
}

两种方案对比：

• 方案一适合偶尔需要主动获取值的场景（比如点击按钮时）；
• 方案二更适合需要实时同步选中值的场景，遵循React单向数据流，代码更易维护。

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