reactjs在两个组件之间传输数据[重复]

Question

在 react js 中，我有 2 个组件。

在 Component1.jsx 中：

import Info from Component2.jsx; 
... 
...
var dataInfo = "some info.. ";
<Info dataInfo={dataInfo} />
...
... 

在上面的代码中，我们将表单 props 中的数据从 component1.jsx 传输到 component2.jsx

我们可以用同样的方式将 data 传回 component2.jsx 到 component1.jsx 吗？

请帮帮我。我试图在谷歌中找到答案，但无法正确找到。

Answer 1

是的，您可以转移回父组件， 我会给你一个例子来清楚地展示你如何做到这一点

假设您有一个名为 component1 的父级，并且它有一个作为子级导入的名为 component2 的表单

如下：

---

import React, { Component } from 'react';
export default class Component2 extends Component{

constructor() {
    super();

    this.state = {
        UserName: '',
        email: ''
    };
    this.onSubmit = this.onSubmit.bind(this)
}

onSubmit(e){
    e.preventDefault();
    var field = {
        UserName:  this.state.UserName,
        email :   this.state.email,
        password:  this.state.password,
    }
    **this.props.onUpdate(field);**
}
onChange(e){
    this.setState({
        [e.target.name]: e.target.value
    });
}
render() {
    var UserNameError = **this.props.UserNameError**;
    var emailError = **this.props.emailError**;

    return(

        <div className="col-md-6 col-sm-6">
            <div className="title">Create Account</div>
            <Form onSubmit={this.onSubmit}>
                <div className="form-group">
                    <label>user Name</label>
                    <input onChange={this.onChange.bind(this)} value={this.state.UserName} name='UserName'/>
                    <span className="error is-visible">{UserNameError}</span>
                </div>
                <div className="form-group">
                    <label>Email</label>
                    <input onChange={this.onChange.bind(this)} value={this.state.email} name='email' />
                    <span className="error is-visible">{emailError}</span>
                </div>

                <Button className='btn submit'>Register</Button>
            </Form>
        </div>
    )
}}

---

import React, { Component } from 'react';
import Component2 from './Component2'
export default class Component1 extends Component{
    constructor() {
        super();
        this.state = {
            UserName: '',
            email: '',
            UserNameError:' UserNameError ',
            emailError:' emailError '
        };
    }
    onUpdate(val) {
        this.setState({
            email: val.email,
            UserName: val.UserName,
        });
        console.log(' onSubmit  ** email' + val.email + " UserName " + val.UserName )
    };
    render() {
        return(
            <div className="col-md-6 col-sm-6">
                <Component2 **UserNameError={this.state.UserNameError}** **emailError={this.state.emailError}** **onUpdate={this.onUpdate.bind(this)}**  />
            </div>
        )

    }
}

我在句子周围加了星号，以注意我如何将数据错误从父组件 1 传输到组件 2

以及如何通过 onUpdate 函数将表单数据从子组件 2 发送到组件 1