通过下拉组件选择添加动态文本字段？ React Office UI Fabric

Question

在以下项目中，我正在Microsoft Excel中使用TypeScript和React创建任务窗格。加载任务窗格时，它将仅具有几个选项的基本下拉列表。

import * as React from "react";
import Progress from "./Progress";
import { Dropdown, DropdownMenuItemType, IDropdownStyles, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
//import TopLevel from "./Operations/TopLevel";
//import MakeItem from "./Operations/MakeItem";
//import RawMaterial from "./Operations/RawMaterial";
//import BuyItem from "./Operations/BuyItem";
export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}

export interface AppState {

}

export default class App extends React.Component<AppProps, AppState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
    };
  }

  componentDidMount() {
    this.setState({

    });
  }

  render() {
    const { title, isOfficeInitialized } = this.props;
    const dropdownStyles: Partial<IDropdownStyles> = {
      dropdown: { width: 300 }
    };
    const options: IDropdownOption[] = [
      { key: 'blank', text: '' },
      { key: 'topLevelMake', text: 'Parents', itemType: DropdownMenuItemType.Header },
      { key: 'topLevel', text: 'TOP LEVEL' },
      { key: 'make', text: 'MAKE ITEM' },
      { key: 'divider_1', text: '-', itemType: DropdownMenuItemType.Divider },
      { key: 'Purchased', text: 'Purchases', itemType: DropdownMenuItemType.Header },
      { key: 'rawMaterial', text: 'RAW MATERIAL' },
      { key: 'buyItem', text: 'BUY ITEM' },
    ];
    ;
    if (!isOfficeInitialized) {
      return (
        <Progress title={title} logo="assets/logo-filled.png" message="Please sideload your addin to see app body." />
      );
    }

    return (
      <div className="ms-welcome">
            <Dropdown
              label="Operation"
              key="dropDownKey"
              options={options}
              styles={dropdownStyles}
            />
      </div>
    );
  }
}

用户选择一个选项后，我希望命名类似于动态显示TextField的组件。例如，如果用户选择“ TOP LEVEL”，那么我希望“ TopLevel.tsx”显示该组件中的TextField和Dropdowns。如何添加onChange事件以查找Dropdown选项的状态并将其与组件链接？例如，这是顶级.tsx代码。

import * as React from "react";
import { Stack } from 'office-ui-fabric-react';
import { TextField} from 'office-ui-fabric-react/lib/TextField';
//import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';

export interface TopLevelProps {
  title: string;
  logo: string;
  message: string;
}

export default class TopLevel extends React.Component<TopLevelProps> {
  render() {

    return (
      <div>
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
        <TextField 
            label="Part Number"
            styles={{ root: { width: 245 } }}
          />
          <TextField 
              label="Rev"
              styles={{ root: { width: 50 } }}
          />
      </Stack>
        <TextField 
            label="Description"
            styles={{ root: { width: 300 } }}
          />
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
        <TextField 
            label="QTY"
            styles={{ root: { width: 95 } }}
          />
        <TextField 
            label="# of Extra Parts"
            styles={{ root: { width: 100 } }}
        />
        <TextField 
            label="Lead Time"
            styles={{ root: { width: 95 } }}
          />
      </Stack>
      <Stack horizontal tokens={{ childrenGap: 5 }} styles={{ root: { width: 350 } }}>
          <TextField 
            label="Comments"
            styles={{ root: { width: 300 } }}
          />
      </Stack>
      </div>
    );
  }
}

Answer 1

这是一个具有下拉菜单的基本程序，根据下拉菜单的值将显示不同的形式。

const Dropdown = (): React.ReactElement => {
  const [value, setValue] = useState("none");

  let Form: any;
  switch (value) {
    case "TopLevel":
      Form = <TopLevel title="title" logo="logo" message="message" />;
      break;

    case "Make":
      Form = <Make />;
      break;

    default:
      Form = <div />;
      break;
  }

  return (
    <div>
      <select
        id="lang"
        onChange={event => event?.target?.value && setValue(event.target.value)}
        value={value}
      >
        <option value="select">Select</option>
        <option value="TopLevel">TopLevel</option>
        <option value="Make">Make</option>
      </select>
      <p></p>
      {Form}
    </div>
  );
};

export interface TopLevelProps {
  title: string;
  logo: string;
  message: string;
}

class TopLevel extends React.Component<TopLevelProps> {
  render() {
    return (
      <div>
        <div>TopLevel</div>
        <input placeholder="Part Number" />
      </div>
    );
  }
}

class Make extends React.Component<{}> {
  render() {
    return <div>Make</div>;
  }
}

function App() {
  return <Dropdown />;
}

注意switch如何让您使用不同的形式表示不同的值。

DropDown组件也有一个onChange，因此应该可以通过类似的方式进行连接，并为不同的值提供不同的表单呈现。