react兄弟元件傳值實現註冊成功帶值跳轉登入

2021-10-23 23:25:18 字數 1221 閱讀 1726

有些專案要實現註冊完成後跳轉到登入,並且攜帶註冊的手機號

下面來看一下效果演示:

先模組化拆分,將註冊和登入拆分成兩個元件,然後利用利用了傳值,看**:

//元件拆分,父元件的內容

state =

//修改父元件選項卡函式

changeactivekey

=(value)

=>)}

//修改mobile值函式

changemobile

=(value)

=>)}

render()

=this

.state;

return

(}>

"card" tabbargutter=

"0" animated=

activekey=

onchange=

>

"登入" key=

"1">

// 將mobile和修改mobile函式通過props傳給登入元件

history=

/>

<

/tabpane>

"註冊" key=

"2">

//將修改mobile函式和修改選項卡值的函式傳給註冊元件

changeactivekey=

changemobile=

/>

<

/tabpane>

<

/tabs>

<

/div>

)}註冊元件,看**:

//註冊資訊填寫完整

const

onfinish

=(values)

=>

,//使用的是antd框架,表單提交的api,values包含表單所有內容

method:

"post"})

.then

(res =>

}= res;

if(type)

})登入元件,看**:

//使用了antd的form元件,可以直接這樣操作
useeffect((

)=>);

})以上就是實現該效果的方法

react 父子元件,兄弟元件傳值

昨天學習了class,今天開始學元件傳值了,說真的,我這都學第二遍了還是沒有繞過來 笑哭 哭笑 笑出眼淚 破涕為笑 笑死 笑尿 笑cry 所以我趕緊跑過來寫到這裡,跟小夥伴們一起學習一下,也能更好的加深一下印象,廢話不多說,下面就讓我們開始吧!先來看一下父傳子 父元件 建立建構函式 construc...

React中兄弟元件傳值

兄弟元件傳值 實際上是間接的通過第三方來實現傳值,舉例,第乙個兒子把值傳給父親,父親在把這個值傳給第二個兒子,這樣就實現了兄弟元件傳值 來看 父元件 1 import react from react 2 import son1 from son1 3 import son2 from son2 4...

vue 元件傳值 父子元件傳值,兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數,如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...