从下拉办公室结构 ui 中获取 selectedKey

Question

我创建了两个反应类。其中之一 - 子类名称 - ChildView，将数据绑定到下拉办公室结构组件中，我在 ParentView 类上使用

子视图，代码：

export class ChildView extends React.Component<any, IChildView >{
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' },
    ]
}

public render() {
    return (<Dropdown defaultSelectedKey={this.state.selectedKey}
        options={this.state.items} />);
}
}

父视图，代码：

export default class ParentView extends React.Component<any, IParentView> {

constructor(props) {
    super(props);
}
public render(): React.ReactElement<IParentViewProps> {
    return (<ChildView />);}}

我的问题：

1) 如何从 ParentView 类中的 ChildView selectedKey 返回。？我读过文档，有'componentRef'。所以我在 ParentView 中更新了我的代码：

public render(): React.ReactElement<IParentViewProps> {
    return (<ChildView componentRef={(ddItems)=>this.something = ddItems}/>);}}

我不知道接下来会发生什么。

Answer 1

您可以将一个函数从 Parent 传递给 Child，当更改 Child 中的选定键时将调用该函数：

export class ChildView extends React.Component<any, IChildView >{
  constructor(props) {
    super(props)

    this.state = {
      selectedKey: "1",
      selectedText: "one - 1",
      items: this._getItems()
    }
    this.keyChanged = this.keyChanged.bind(this);
  }

  private _getItems() {
   return [...]
  }

  keyChanged(option){
    this.props.updateKey(option.key);
  }

 public render() {
  return (<Dropdown defaultSelectedKey={this.state.selectedKey}
    options={this.state.items}
    onChanged={this.keyChanged} />);
 }
}

和父渲染方法：

public render(): React.ReactElement<IParentViewProps> {
  return (<ChildView updateKey={this.setKey} />);
}

并定义setKey函数接受父级中的key。

Answer 2

React 并不是真正围绕父母向他们的孩子要东西而构建的。相反，它是围绕父母告诉孩子的事情和孩子告诉父母的事情而建立的。因此，您应该让父母监控或控制孩子，而不是按需询问，以便父母始终知道孩子选择了什么 - 然后它就不需要按需获取它。以下是您如何执行此操作的示例：

Parent.tsx：

import { IDropdownOption } from 'office-ui-fabric-react';
import * as React from 'react';

import { ExampleDropdown } from './ExampleDropdown';

interface State {
    exampleDropdown?: IDropdownOption;
}

export class Parent extends React.Component<any, State> {
    state = { } as State;

    onDropdownChange = (keyValue?: IDropdownOption) => {
        if (keyValue && keyValue.key) {
            this.setState({ exampleDropdown: keyValue })
        }
    }

    render() {
        return <ChildView
            onSelectionChange={this.onDropdownChange}
            selected={this.state.exampleDropdown}
        />
    }
}

ChildView.tsx

import { Dropdown as OfficeFabricDropdown, IDropdownOption } from 'office-ui-fabric-react';
import * as React from 'react';

interface Props {
    /** Provide this value to control the state. If left blank it will manage its own state */
    selected?: IDropdownOption,
    onSelectionChange?: (keyValue?: IDropdownOption) => void,
}

interface State {
    currentState?: IDropdownOption,
    items: IDropdownOption[],
    selectedIndex?: number,
}

export class ChildView extends React.Component<Props, State> {
    state: State = {
        items: [
            { 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' },
        ],
    } as State;

    onDropdownChange = (event: React.FormEvent<HTMLDivElement> | any, option: any = {}, index?: number) => {
        this.setState({
            currentState: index || index === 0 ? this.state.items[index] : undefined,
            selectedIndex: index,
        });

        const currentSelected = (index || index === 0) ? this.state.items[index] : undefined;
        this.props.onSelectionChange && this.props.onSelectionChange(currentSelected);
    };

    render(): JSX.Element {
        const selected = this.props.selected && this.props.selected.key ||
            this.state.currentState && this.state.currentState.key;

        return <OfficeFabricDropdown
            {...this.props}
            ariaLabel="Example Dropdown"
            label="Example Dropdown"
            options={this.state.items}
            placeHolder={"Pick a number"}
            selectedKey={selected}
            onChange={this.onDropdownChange}
        />;
    }
}

export default ChildView;

拥有父控件的状态有一些很好的优势，例如能够保存和恢复状态，以便当用户离开页面并返回时，状态与他们离开时一样。但是，如果您不希望这样，您可以简单地删除 selected={this.state.exampleDropdown} 行，一切仍将正常工作，您仍将拥有父级中的状态。

现在，话虽如此，当场合需要时，另一个答案中的“询问”技巧的双指针非常棒，但它应该谨慎使用，似乎不是解决这个问题的好方法。