Reactjs 如何传递子组件'；将窗体值转换为父组件

是否有一种方法可以将表单数据从子组件传递到父组件，父组件中保留了提交按钮

注意：-我不想使用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>
        )
    }
}

类FirstChildForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
}
render（）{
返回(
)
}
}
类SecondChildForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
}
render（）{
返回(
);
}
}
导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
}
handleSubmit=（）=>{
}
render（）{
返回(
提交
)
}
}

当然，这个概念被称为。基本上，您的

组件将保存来自这两个组件的数据。我会简化一点，但你应该明白我在做什么

FirstChildForm.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>
        );
    }
}

props.updateData（'user'，e.target.value）}

SecondChildForm.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>
        );
    }
}

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扩展React.Component{
构造函数（）{
超级（）；
此.state={
用户：“”，
通过：“”，
};
}
handleSubmit=（）=>{}；
updateData=（目标，值）=>{
this.setState（{[target]：value}）；
};
render（）{
返回(
提交
);
}
}

成分是真理的源泉。请注意:

通过提升状态，

和

不再需要是基于类的组件，它们可以是功能组件。如果出于任何原因希望它们保持基于类，请将

props.updateData

更改为

this.props.updateData

，否则它将无法工作

---

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

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

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 } }))
    }

---

将函数作为道具传递给子组件，并将子组件的状态作为参数传递给函数

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

以下示例

家长：

    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>
  )
}
}

导出默认类App扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
}
handleSubmit=（）=>{
}  
handleData=（新数据）=>{
this.setState（{data:newData}）；
}
render（）{
返回(
提交
)
}
}

儿童：

 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>
);
}
}

class SecondChildForm扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：'你好'
}
}
handleDataChange:函数（）{
var newData=this.state.data
this.props.onSelectData（newData）；
},
render（）{
返回(
提交
);
}
}

谢谢你的帮忙。我还没有想过在onChange上获取表单数据。我试图从父级触发子级事件，该事件获取所有表单数据，然后发送给父级。随时！一定要给这个概念一些爱，因为当你开始建造越来越大的东西时，它可能会给你带来问题。就像当你的组件嵌套了6层深度时，也许是时候考虑ReDux了！