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

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，否则它将不起作用。

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

Answer 2

您必须将一个函数向下传递给您的子组件。您的孩子现在可以将这个函数从他们的 props 绑定到给定的字段。

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

    render() {
        return (
            <div className="form">
                <input type="text" placeholder="Enter your name..." onChange={this.props.dataChanged('name')}/>
                <input type="password" placeholder="Enter password" onChange={this.props.dataChanged('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..." onChange={this.props.dataChanged('name')}/>
                <input type="password" placeholder="Enter password" onChange={this.props.dataChanged('password')}/>
            </div>
        );
    }
}



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

    handleChange = form => field => ev => {
        this.setState(prev => ({ [form]: { ...prev[form], [field]: ev.target.value } }))
    }

您的父级的结果状态将具有以下结构：

{
    'firstForm': {
        'name': '',
        'password': ''
    },
    'secondForm': {
        'name': '',
        'password': ''
    }
}

Answer 3

通过将函数作为 props 传递给子组件，并将子组件的状态作为参数传递给函数

因为我不知道你到底想在里面编码什么，但只是为了理解结帐

以下示例

父母：

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


    handleSubmit = () => {

  }  
  handleData = (newData) => {
    this.setState({data: newData});
}

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

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

孩子：

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

  handleDataChange: function () {
    var newData = this.state.data
    this.props.onSelectData(newData);            
},

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