reactjs - 如何将子组件的表单值传递给父组件

Question

有没有办法将表单数据从子组件传递到父组件，其中提交按钮已保留在父组件中。

注意:- 我不想为此使用 ref，因为 ref 会浪费大量内存，而且我的父级可能有 6-7 个子级。

我创建了一个类似的情况来展示我所坚持的问题。

class FirstChildForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    render() {
        return (
            <div className="form">
                <input type="text" placeholder="Enter your name..." />
                <input type="password" placeholder="Enter password" />
            </div>
        )
    }
}


class SecondChildForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    render() {
        return (
            <div className="form">
                <input type="text" placeholder="Enter your name..." />
                <input type="password" placeholder="Enter password" />
            </div>
        );
    }
}



export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            data: []
        }
    }

    handleSubmit = () => {

    }

    render() {
        return (
            <div className="parent">
                <FirstChildForm />
                <SecondChildForm />

                <button onClick={this.handleSubmit}> Submit</button>
            </div>
        )
    }
}

Answer 1

当然，这个概念叫做 lifting the state up 。基本上，你的<App />组件将保存来自两个组件的数据。我将稍微简化一下，但你应该明白我在做什么。

FirstChildForm.js

<input type="text" name="username" onChange={e => props.updateData('user', e.target.value)}

SecondChildForm.js

<input type="password" name="password" onChange={e => props.updateData('pass', e.target.value)}

App.js

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            user: '',
            pass: '',
        };
    }

    handleSubmit = () => {};

    updateData = (target, value) => {
        this.setState({ [target]: value });
    };

    render() {
        return (
            <div className="parent">
                <FirstChildForm updateData={this.updateData} />
                <SecondChildForm updateData={this.updateData} />

                <button onClick={this.handleSubmit}> Submit</button>
            </div>
        );
    }
}

<App />组件是真理的来源。请注意:

通过提升状态，<FirstChildForm />和<SecondChildForm />不再需要是基于类的组件，它们可以是功能组件。如果您希望它们出于某种原因保持基于类，请更改 props.updateData至this.props.updateData ，否则无法工作。

父级是我们定义函数的地方，子级是我们执行函数的地方，基本上是向父级发送数据!