如何在React的3个组件之间传递数据？

Question

嘿，我在React上是个菜鸟。这个道具和状态的东西正在吞噬我的头。无论如何，我的问题是我有3个Componenets “ LoginForm”，“ InputField”，“ SubmitButton”

我需要的是，当单击SubmitButton时，我想将“用户名”和“密码”详细信息传递给SubmitButton组件。每当输入字段值更改时，我都尝试并成功将数据从InputField传递到LoginForm，但无法对“ SubmitButton”组件执行相同的操作。

预先感谢：）

代码如下。

//LOGING FORM COMPONENT
class LoginForm extends React.Component {

    eventHandler = function (data) {
        console.log(data)
    }  

    render() {
        return (

            <div>
                <InputField onChange={this.eventHandler}/>
                <SubmitButton/>
            </div>
        )
    }
}

export default LoginForm;

//INPUT FIELD COMPONENT

class InputField extends React.Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:''
        };
        this.handleChange=this.handleChange.bind(this)
    }


handleChange = e => {
    this.setState({ [e.target.name]: e.target.value }, () => {
      if (this.props.onChange) {
        this.props.onChange(this.state);
      }
    })
  };

    render() {
        return (
            <div>
                <div>
                    <input name='username' onChange={this.handleChange}></input>

                </div>
                <div>
                    <input name='password' type='password' onChange={this.handleChange}></input>

                </div>


            </div>

        )
    }
}

export default InputField;

//SUBMIT BUTTON COMPONENT

class Submit_Button extends React.Component {

    constructor(props){
        super(props);
        this.loginBtn=this.loginBtn.bind(this)

    }
    loginBtn = function (data) {

        //Empty Because, dont know what to code xD
    }  

    render() {
        return (
            <div>
                <button onClick={this.loginBtn}>
                    Login</button>
                <svg class="bi bi-person" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" d="M13 14s1 0 1-1-1-4-6-4-6 3-6 4 1 1 1 1h10zm-9.995-.944v-.002.002zM3.022 13h9.956a.274.274 0 00.014-.002l.008-.002c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664a1.05 1.05 0 00.022.004zm9.974.056v-.002.002zM8 7a2 2 0 100-4 2 2 0 000 4zm3-2a3 3 0 11-6 0 3 3 0 016 0z" clip-rule="evenodd" />
                </svg>
            </div>

        )


    }
}
export default Submit_Button;

UPDATE：

我解决了90％的问题，但无法更新Parent Componenet（LoginForm）上的状态

class LoginForm extends React.Component {
    constructor(props){
        super(props);
        this.state={
            username:'',
            password:''
        };

    }

    eventHandler = (data) =>{
        console.log(data)
        this.setState=({
            username:data.username,
            password:data.password

    },
    console.log(data.username))

    }  

    render() {
        return (

            <div>
                <InputField onChange={this.eventHandler}/>
                <SubmitButton username={this.state.username} password={this.state.password}/>
            </div>
        )
    }
}

Answer 1

基本上，最好是将数据从一个孩子通过其父母传递给另一个孩子。

在这种情况下，您可以将状态从InputField移至LoginForm，并通过InputField的prop将输入连接到状态，并使它们成为受控组件。 （您可以从here中了解有关受控组件的更多信息）

然后您可以通过其道具将数据从LoginForm的状态传递到SubmitButton。