reactjs - 通过下拉组件选择添加动态文本字段？

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

在 Klas 的回复之后，我稍微更改了我的代码，但是因为没有抛出任何错误，所以遇到了麻烦。我有我的 App.tsx、我的 TopLevel.tsx 以及由于 Klas 而创建的名为 Dropdown.tsx 的新文件。现在我会忘记“Make”，我只是想理解逻辑。我在这里做错了什么？

应用程序.tsx

import * as React from "react";
import Dropdown from "./Operations/Dropdown";
export interface AppProps {
  title: string;
  isOfficeInitialized: boolean;
}
export interface AppState {

}

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

export default App;

下拉列表.tsx

import * as React from "react";
import TopLevel from './TopLevel';
import { useState } from 'react';
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 = <div />;
        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>
        {Form}
      </div>
    );
  };
  export default Dropdown;

顶级.tsx

import * as React from "react";

export interface TopLevelProps {
  title: string;
  logo: string;
  message: string;
}
export default class TopLevel extends React.Component<TopLevelProps> {
  render() {
    return (
      <div>
        <div>TopLevel</div>
        <input placeholder="Part Number" />
      </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>
      {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属性，因此应该可以以类似的方式进行连接，为不同的值提供不同的表单渲染。