Question

我的主页上显示了一个TextField和一个Button（均为Material-ui组件）。我希望能够单击该按钮并填充一个包含以前的TextField和已在其中写入的任何文本的表单。我目前拥有的代码只是在表单中创建了TextField的新实例，同时还保留了原来的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}

        );
    }
};

Form.js

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

App.js

const AddButton= (props) => {
return (
    <Button variant="contained" onClick={props.onClick}>
    New Interaction
    </Button>
    )
}


export default class App extends Component {
constructor(props) {
    super(props);
    this.state = {show: false};
}
showForm = () => {
    this.setState({
        show: true,
    });
}
render() {
    return(
    <Fragment>
        <Header />
        <FormTextField />
        <AddButton onClick={this.showInteractionForm} />{this.state.show ? 
<Form /> : null}
    </Fragment>
    );
}

};

Answer 1

当您想在两个组件之间共享数据时，可以根据您的代码以不同的方式解决此问题，一个解决方案可能是：

您的App这样控制数据，

您所在的州可以添加：

this.state = {
 inputData = '';
}

您需要将更新功能传递给FromTextField

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

您的表单字段必须由App控制，因此您也需要传递数据以使其显示：

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

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

最后一步是对Form

进行相同操作

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

在Form内，您需要将data和onTextUpdate传递到FormTextField

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

编辑

https://codesandbox.io/embed/stackoverflow-form-react-9188m，您可以找到我之前告诉过的实现。

单击按钮后如何将带有输入数据的TextField传递到表单？

1 个答案: