如何在react js中的两个子组件之间传输数据？

Question

实际上，我正在创建一个前端，在其中我把一个手机号码作为第一页的输入，然后检查手机号码后，我移动到OTP页面。在动态口令页面，我把动态口令作为输入，并必须发送动态口令和手机号码到后端。我可以通过otp，但不知道如何传递手机号码，因为我已经把它作为上一页的输入。

这是注册组件，它将接受手机号码输入

import React from 'react';
import './Signup.css';
class Signup extends React.Component {

    constructor(props){
        super(props);
        this.state={
            mobile:''
        }
    }

    onMobileChange = (event) => {
        this.setState({mobile: event.target.value})
    }

    onSubmitSignup = () => {
        fetch('https://cors-anywhere.herokuapp.com/http://8080/signup/checkMobile',{
            method:'post',
            headers:{'Content-Type':'application/json'},
            body: JSON.stringify({
                mobile:this.state.mobile
            })
        })
        .then(response => response.json())
        .then(data =>{
            if(data.content === 'OK'){
                this.props.loadNewUser(this.state.mobile);
                this.props.onRouteChange('otp','nonav');
            }
        })
        // this.props.onRouteChange('otp','nonav');
    }

    render(){
        const { onRouteChange} = this.props;
        return(
            <div className='container'>
                <div className='mt6'>
                    <img src={require('./logo.png')} className='logoimg' alt='logo'/>
                </div>
                <h3 className='text-center b' style={{font:"Montserrat"}}>FOODVIRAAM</h3>
                <div>
                <article className="br3 ba dark-gray b--white mv4 w-100 w-50-m w-25-l mw6 shadow-6 center">
                    <main className="pa4 black-80">
                        <div className="measure">
                            <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
                                <div className="mt1">
                                    <label className="db fw5 lh-copy f3" htmlFor="email-address" style={{font:"Montserrat"}}>Enter your mobile number</label>
                                    <input 
                                    className="pa2 input-reset ba bg-transparent hover-bg-black bw1 br2 w-100"
                                    type="number" 
                                    name="mobile" 
                                    id="mobile"
                                    style={{borderColor:"#ffde59",lineHeight:"28px"}}
                                    onChange={this.onMobileChange}
                                    />
                                </div>
                            </fieldset>
                            <div className="tr">
                                <input 
                                onClick={this.onSubmitSignup}
                                className="pv2 input-reset ba b--white bg-transparent grow pointer f3 dib" style={{font:"Montserrat"}} type="submit" value="Send OTP"/>
                            </div>
                        </div>
                    </main>
                </article>
                </div>
                <h5 className="tc mt5" style={{font:"Montserrat"}}>{"#HighwayKaHygienicPitStop"}</h5>
            </div>
        );
    }
}

export default Signup;

OTP组件，其中我将接受OTP作为输入，然后必须在提交时发送otp和手机号码

import React from 'react';
import './Signup.css';
class Otp extends React.Component{
    constructor(props){
        super(props);
        this.state={
            otp:''
        }
    }

    onOtpChange = (event) => {
        this.setState({otp: event.target.value})
    }

    onSubmitOtp = () => {
        console.log(this.props.mobile);
        fetch('https://cors-anywhere.herokuapp.com/http://8080/signup/validateOtp',{
            method:'post',
            headers:{'Content-Type':'application/json'},
            body: JSON.stringify({
                mobile:this.props.mobile,
                otp:this.state.otp
            })
        })
        .then(response => response.json())
        .then(data =>{
            if(data.content === 'OK'){
                // this.props.loadNewUser(this.state.otp);
                this.props.onRouteChange('createprofile','nonav');
            }
        })
        this.props.onRouteChange('otp','nonav');
    }

    render(){
        const { mobile,onRouteChange} = this.props;
        return(
            <div className='container'>
                <div className='mt6'>
                    <img src={require('./logo.png')} className='logoimg' alt='logo'/>
                </div>
                <h3 className='text-center b' style={{font:"Montserrat"}}>FOODVIRAAM</h3>
                <div>
                <article className="br3 ba dark-gray b--white mv4 w-100 w-50-m w-25-l mw6 shadow-6 center">
                    <main className="pa4 black-80">
                        <div className="measure">
                            <fieldset id="sign_up" className="ba b--transparent ph0 mh0">
                                <div className="mt1">
                                    <label className="db fw5 lh-copy f3" htmlFor="email-address" style={{font:"Montserrat"}}>Verify OTP</label>
                                    <input 
                                    className="pa2 input-reset ba bg-transparent hover-bg-black bw1 br2 w-100"
                                    type="number" 
                                    name="mobile-number" 
                                    id="mobile-number"
                                    style={{font:"Montserrat", borderColor:"#ffde59",lineHeight:"28px"}}
                                    onChange={this.onOtpChange}
                                    />
                                </div>
                            </fieldset>
                            <div className="tr">
                                <input 
                                onClick={this.onSubmitOtp}
                                className="pv2 input-reset ba b--white bg-transparent grow pointer f3 dib" style={{font:"Montserrat"}} type="submit" value=""/>
                            </div>
                        </div>
                    </main>
                </article>
                </div>
                <h5 className="tc mt5" style={{font:"Montserrat"}}>{"#HighwayKaHygienicPitStop"}</h5>
            </div>
        );
    }
}

export default Otp;

这是父类

class App extends Component {
  constructor(props){
    super(props);
    this.state={
      route:'signup',
      route1:'nonav',
      newuser:{
        mobile:''
      }
    }
  }

  loadNewUser = (mobile)=>{
    this.setState({user: {
      mobile:mobile
    }})
    console.log(mobile); 
  }

  onRouteChange = (route, route1) =>{
    this.setState({route:route});
    this.setState({route1:route1});
  }

  render(){
  return (
    <div className="App">
      {this.state.route1==='nav'
      ? <div>
          <Navigation onRouteChange={this.onRouteChange}/>
          { this.state.route==='editmnc' 
            ? <EditMNC parentMethod={this.onRouteChange}>{this.props.children}</EditMNC>
            :<Revenue onRouteChange={this.onRouteChange}/>
          }
        </div>
       }
       : <div>
          { this.state.route==='signup'
          ? <Signup loadNewUser={this.loadNewUser} onRouteChange={this.onRouteChange}/>
          : <div>
            { this.state.route==='otp'
             ? <Otp mobile={this.state.newuser.mobile} onRouteChange={this.onRouteChange}/>
             : <div>
               { this.state.route==='createprofile'
               ?  <CreateProfile onRouteChange={this.onRouteChange} />
               : <div>
                 { this.state.route==='signin'
                 ? <Signin onRouteChange={this.onRouteChange} />
                 : <AddItem onRouteChange={this.onRouteChange}/>
                 }
                 </div>
               }
               </div>
            }
            </div>
        }
        </div>
      }        
    </div>
  );
  }
}

Answer 1

使用localStorage或Cookies在一个页面上存储您的电话号码，在下一个页面上，您可以通过您选择的任何媒介轻松地检索数据。因为在其中任何一个上存储数据都是持久化的，所以您不需要担心页面的意外刷新。

不要使用Redux或Context API，因为它们不会持久化数据。

示例:-

使用localStorage应用编程接口

// storing the phone number on your first page.
localStorage.setItem('$$NAMESPACE__phone_number', phoneNumber)

// getting the phone number on your second.
const phoneNumber = localStorage.getItem('$$NAMESPACE__phone_number')

Answer 2

使用Redux它有点复杂，但当你需要从子节点传输数据到父节点时，你可以使用Redux，你也可以获得你通过道具发送到子节点的数据，并获得返回值

https://redux.js.org