亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 React JS 中的兩個子組件之間傳輸數據?

如何在 React JS 中的兩個子組件之間傳輸數據?

POPMUISE 2023-02-24 16:50:54
實際上,我正在創建一個前端,在其中我將手機號碼作為第一頁的輸入,然后在檢查手機號碼后我將轉到 OTP 頁面。在 OTP 頁面中,我將 otp 作為輸入,并且必須將 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>
查看完整描述

2 回答

?
大話西游666

TA貢獻1817條經驗 獲得超14個贊

使用localStorage或Cookies將您的電話號碼存儲在一頁和下一頁上,您可以通過您選擇的任何媒體輕松檢索數據。由于存儲在其中任何一個上都會保留您的數據,因此您無需擔心頁面的意外刷新。


不要使用Reduxor Context API,因為它們不會保留數據。


例子 :-


使用本地存儲 API


// 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')


查看完整回答
反對 回復 2023-02-24
?
慕容森

TA貢獻1853條經驗 獲得超18個贊

使用 Redux 它有點復雜但是當你需要從孩子向父母傳輸數據時使用它,你還可以獲取你通過道具發送給孩子的數據并獲得返回值

https://redux.js.org


查看完整回答
反對 回復 2023-02-24
  • 2 回答
  • 0 關注
  • 149 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號