Javascript 单击按钮后，如何将包含输入数据的文本字段传递到表单中？

我的主页上显示了一个文本字段和一个按钮（都是材质ui组件）。我希望能够单击按钮并填充一个表单，该表单包含以前的文本字段和任何已经写入其中的文本。我目前的代码只是在表单中创建了一个新的TextField实例，同时保留了原始的TextField。如何在不复制的情况下将现有文本字段转换到表单中

FormTextField.js

const FormTextField = props => {
    return (
        <TextField
            fullWidth={true}
            multiline={true}
            rows="10"
            variant="outlined"
        >
        {props.data}
        </TextField>

    )
}

export default class FormTextField extends Component {
    render() {
    data={this.props.data} />
    return (

        {FormTextField}

        );
    }
};

const FormTextField=props=>{
返回(
{props.data}
)
}
导出默认类FormTextField扩展组件{
render（）{
data={this.props.data}/>
返回(
{FormTextField}
);
}
};

Form.js

const Form= () => {
return (
    <FormLabel">Input Text...</FormLabel>
    <FormTextField />
);}
export default Form;

const Form=（）=>{
返回(
由于您希望在两个组件之间共享数据，您可以根据代码以不同的方式解决此问题，解决方案可以是：

您的
应用程序
可以控制数据

在您所在的州，您可以添加：

this.state = {
 inputData = '';
}

您需要将更新函数传递给您的
FromTextField

<FormTextField onTextUpdate={(text) => this.setState({ inputData: text })} />

（您需要将该修改添加到FormTextField，这很简单）

最后一步是对
Form

<Form data={this.state.inputData} onTextUpdate={(text) => this.setState({ inputData: text })} />

this.setState（{inputData:text}）}/>

在
表单中
您需要将
数据
和
onTextUpdate
传递到
表单文本字段

<FormTextField onTextUpdate={(text) => this.setState({ inputData: text })} />

您可以将
（text）=>this.setState（{inputData:text}）
重构为类中的方法

编辑

您可以找到关于我之前告诉过您的实现。
您希望外部的FormTextField与内部的FormTextField相同吗？还是FormTextField中的数据位于表单内部的FormTextField中？我希望主页显示FormTextField以及按钮，表单隐藏。单击按钮时，我希望表单填充并删除ge FormTextField与TextField中的任何现有数据一起写入。我意识到我在这里调用了两次…但我不确定如何执行此操作。我在App.js中未定义inputData时遇到了一个错误。我编写它的方式是这样的。state={show:false，inputData=''}；在构造函数中，请参阅我发布的链接
<Form data={this.state.inputData} onTextUpdate={(text) => this.setState({ inputData: text })} />