Question

我创建了两个反应类。其中一个 - 子类名 - ChildView，将数据绑定到dropdown office fabric组件，我在ParentView类上使用

ChildView，代码：

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} />);
}
}

ParentView，代码：

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函数以接受父级中的键。

Answer 2

反应并不是真正围绕父母向孩子询问事情而建立的。相反，它是围绕父母告诉孩子的事情和孩子告诉父母的事情而建立的。因此，您应该让父母监视或控制孩子，而不是按需询问，这样父母就始终知道孩子选择了什么，那么就不需要按需得到它。这是如何执行此操作的示例：

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}行，一切将仍然有效，并且父项中的状态仍将保持不变。

现在，尽管如此，当有需要时，指向另一个答案中“问”把戏的双重指针是很棒的，但是应该谨慎使用它，似乎并不是解决这个问题的好方法。 >

从下拉办公室面料ui获取selectedKey

2 个答案:

Parent.tsx：

ChildView.tsx