Reactjs 通风口：任何）=>{ const data=this.props.formData&event.target.value；/*合并props.formData和event.target.value*/ this.props.onDataChange（数据） }; render（）{ 返回( ); } };

一种方法是

• 具有将表单数据更新为父状态的函数
• 将此函数作为道具传递给表单1和表单2
• 对于表单中的任何更新，必须调用此函数以更新父状态
• 这些更新的值也必须作为道具传递给子级

最后，单击Parent中的按钮时，可以提交状态中的内容

您必须将本地状态从Form1和Form2向上移动到父级，并将必需的表单值作为道具发送给子组件，并且子组件不需要本地状态

编辑：

父组件

import * as React from "react";
import { Dropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { PrimaryButton } from 'office-ui-fabric-react/lib/';
import Form1 from './Form1';
import Form2 from './Form2';
export interface ParentProps {
};

export interface ParentState  {
  selectedItem?: { key: string | number | undefined };
  operationType?;
  formName?
};

export default class ParentComponent extends React.Component<ParentProps, ParentState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
      operationType: '',
      formName: '',
    };
  }
  addToExcel = async () => {
    try {
      await Excel.run(async context => {
        const range = context.workbook.getSelectedRange();
        range.load("address");
        await context.sync();
        console.log(`The range address was ${range.address}.`);
      });
    } catch (error) {
      console.error(error);
    }
    this.setState({
      operationType: '',
    })
  };
render(){
  const { selectedItem } = this.state;
  const options: IDropdownOption[] = [
      { key: 'blank', text: '' },
      { key: 'topLevelMake', text: 'Parents', itemType: DropdownMenuItemType.Header },
      { key: 'topLevel', text: 'TOP LEVEL' },
      { key: 'make', text: 'MAKE ITEM' },
    ];
    return(
    <div>
        <Dropdown
            label="Operation"
            selectedKey={selectedItem ? selectedItem.key : undefined}
            onChange={this._onChange}
            placeholder={"Select an option"}
            options={options}
            styles={{ dropdown: { width: 300 } }}
        />
        {this.state.formName}  
        <p></p>
        <PrimaryButton 
            text="Enter"
            onClick={this.addToExcel}
        />
    </div>
      );
   }
   private _onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    this.setState({ selectedItem: item });
    this.setState({operationType: item.text})
    console.log(event);
    let Form = <div />;
    switch (item.text) {

      case "TOP LEVEL":
        Form = <Form1 /> ;
        this.setState({formName: Form});
        break;

      case "MAKE ITEM":
        Form = <Form2 /> ;
        this.setState({formName: Form});
      break;


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

导出默认类ParentComponent扩展React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
此.state={
操作类型：“”，
formName:“”，
formData:{/*数据作为对象*/}
};
}
updateFormData=（data）=>this.setState（{formData:data}）
addToExcel=async（）=>{
试一试{
等待Excel.run（异步上下文=>{
const range=context.workbook.getSelectedRange（）；
加载范围（“地址”）；
wait context.sync（）；
log（`范围地址是${range.address}.`）；
});
}捕获（错误）{
控制台错误（error）；
}
这是我的国家({
操作类型：“”，
})
};
render（）{
const{selectedItem}=this.state；
常量选项：IDROPDONOPTION[]=[
{键：'空白'，文本：'}，
{key:'topLevelMake'，text:'Parents'，itemType:DropdownMenuItemType.Header}，
{键：'topLevel'，文本：'topLevel'}，
{键：'make'，文本：'make ITEM'}，
];
返回(
{this.state.formName}

);
}
private>onChange=（事件：React.FormEvent，项：idropdownpoption）：void=>{
this.setState（{selectedItem:item}）；
this.setState（{operationType:item.text}）
console.log（事件）；
设形式=；
开关（item.text）{
案例“顶层”：
形式=；
this.setState（{formName:Form}）；
打破
案例“制造项目”：
形式=；
this.setState（{formName:Form}）；
打破
违约：
表格=
打破
}
};
}

表格1组成部分

import * as React from "react";
import { Dropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { PrimaryButton } from 'office-ui-fabric-react/lib/';
import Form1 from './Form1';
import Form2 from './Form2';
export interface ParentProps {
};

export interface ParentState  {
  selectedItem?: { key: string | number | undefined };
  operationType?;
  formName?
};

export default class ParentComponent extends React.Component<ParentProps, ParentState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
      operationType: '',
      formName: '',
    };
  }
  addToExcel = async () => {
    try {
      await Excel.run(async context => {
        const range = context.workbook.getSelectedRange();
        range.load("address");
        await context.sync();
        console.log(`The range address was ${range.address}.`);
      });
    } catch (error) {
      console.error(error);
    }
    this.setState({
      operationType: '',
    })
  };
render(){
  const { selectedItem } = this.state;
  const options: IDropdownOption[] = [
      { key: 'blank', text: '' },
      { key: 'topLevelMake', text: 'Parents', itemType: DropdownMenuItemType.Header },
      { key: 'topLevel', text: 'TOP LEVEL' },
      { key: 'make', text: 'MAKE ITEM' },
    ];
    return(
    <div>
        <Dropdown
            label="Operation"
            selectedKey={selectedItem ? selectedItem.key : undefined}
            onChange={this._onChange}
            placeholder={"Select an option"}
            options={options}
            styles={{ dropdown: { width: 300 } }}
        />
        {this.state.formName}  
        <p></p>
        <PrimaryButton 
            text="Enter"
            onClick={this.addToExcel}
        />
    </div>
      );
   }
   private _onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    this.setState({ selectedItem: item });
    this.setState({operationType: item.text})
    console.log(event);
    let Form = <div />;
    switch (item.text) {

      case "TOP LEVEL":
        Form = <Form1 /> ;
        this.setState({formName: Form});
        break;

      case "MAKE ITEM":
        Form = <Form2 /> ;
        this.setState({formName: Form});
      break;


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

import*as React from“React”；
从“office ui fabric react/lib/”导入{TextField}；
导出接口Form1Props{
formData：任何/*类型的表单数据*/
onDataChange：（数据：任意）=>void
};
导出默认类Form1扩展React.Component{
handleChange=（事件）=>{
const data=/*合并props.formdata和event.target.value*/
this.props.onDataChange（数据）
};
handleChange2=（事件）=>{
const data=/*合并props.formdata和event.target.value*/
this.props.onDataChange（数据）
};
render（）{
返回(
);
}
};

你好！谢谢你的回复。如何将函数从父状态传递到Form1和Form2？你能给我举个这个函数的例子吗？我不知道如何在不将子组件导出为功能组件的情况下将函数传递给子组件。@Ethan在我的答案中添加了代码示例。希望这有帮助。谢谢你！我还是有点困惑，请看编辑代码。我做错了什么？在

行中，您正在将formName传递给formData prop。您应该传递

this.state.formData

。我想我在回答中犯了这个错误。现在已修复。更改后（我在顶部编辑了它），它似乎正在单击。如何将文本记录在文本字段中？

import * as React from "react";
import { Dropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
import { PrimaryButton } from 'office-ui-fabric-react/lib/';
import Form1 from './Form1';
//import Form2 from './Form2';
export interface ParentProps {

};

export interface ParentState  {
  selectedItem?: { key: string | number | undefined };
  operationType?;
  formName?;
  formData;
  updateFormData?;
};

export default class ParentComponent extends React.Component<ParentProps, ParentState> {
  constructor(props, context) {
    super(props, context);
    this.state = {
      operationType: '',
      formName: '',
      formData: ''
    };
  }

  updateFormData = (data) => this.setState({ formData: data })

  addToExcel = async () => {
    try {
      await Excel.run(async context => {
        const range = context.workbook.getSelectedRange();
        range.load("address");
        await context.sync();
      console.log((`The range address was ${this.state.formData}.`))
      });
    } catch (error) {
      console.error(error);
    }
    this.setState({
      operationType: '',
      formData: '',
      formName: '',
    })
  };
  render() {
    const { selectedItem } = this.state;
    const options: IDropdownOption[] = [
      { key: 'blank', text: '' },
      { key: 'topLevelMake', text: 'Parents', itemType: DropdownMenuItemType.Header },
      { key: 'topLevel', text: 'TOP LEVEL' },
      { key: 'make', text: 'MAKE ITEM' },
    ];
    return (
      <div>
        <Dropdown
          label="Operation"
          selectedKey={selectedItem ? selectedItem.key : undefined}
          onChange={this._onChange}
          placeholder={"Select an option"}
          options={options}
          styles={{ dropdown: { width: 300 } }}
        />
        {this.state.formName}
        <p></p>
        <PrimaryButton
          text="Enter"
          onClick={this.addToExcel}
        />
      </div>
    );
  }
  private _onChange = (event: React.FormEvent<HTMLDivElement>, item: IDropdownOption): void => {
    this.setState({ selectedItem: item });
    this.setState({ operationType: item.text })
    console.log(event);
    let Form = <div />;
    switch (item.text) {

      case "TOP LEVEL":
        Form = <Form1 formData={this.state.formData} onDataChange={this.updateFormData} />;
        this.setState({ formName: Form });
        break;

      //case "MAKE ITEM":
      //  Form = <Form2 formData={this.state.formName} onDataChange={this.updateFormData} />;
      //  this.setState({ formName: Form });
      //  break;


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

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

export interface Form1Props {
  formData: any /* Type of form data */
  onDataChange: (data: any) => void 
};

export default class Form1 extends React.Component<Form1Props> {

  handleChange = (event: any)  => {
    const data = this.props.formData & event.target.value; /* merge props.formdata and event.target.value*/
    this.props.onDataChange(data)
  };

  handleChange2 = (event: any)  => {
    const data = this.props.formData & event.target.value;/* merge props.formdata and event.target.value*/
    this.props.onDataChange(data)
  };

  render(){
    return (
      <div>
        <TextField
          label="TextField"
          type="text"
          value={this.props.formData.dataGoToExcel}
          onChange={this.handleChange}
        />
        <TextField
          label="Another TextField"
          type="text"
          value={this.props.formData.dataGoToExcel2}
          onChange={this.handleChange2}
        />
      </div>
    );
  }
};