React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)
React Hook父組件獲取子組件數(shù)據(jù)/函數(shù)
我們知道在react中,常用props實現(xiàn)子組件數(shù)據(jù)到父組件的傳遞,但是父組件調用子組件的功能卻不常用。
文檔上說ref其實不是最佳的選擇,但是想著偷懶不學redux,在網(wǎng)上找了很多教程,要不就是hook的講的太少,要不就是父子組件傻傻分不清,于是只好再啃了一下文檔,就學了一下其它hook的api。
在這里我們需要用到useImperativeHandle這個api,其函數(shù)形式為
useImperativeHandle(ref, createHandle, [deps])
其實這個api也是ref的一種形式,但是相當于做了一定的優(yōu)化,可以選擇讓子組件只暴露一定的api給父組件,根據(jù)在文檔和其他博客上給出的方法
一共有兩大步驟:
- 1.將ref傳遞到子組件中
- 2.需要使用forwardRef對子組件進行包裝
子組件MyWorldMap
?const mapRef = useRef(null); ? ? useImperativeHandle(ref, () => { ? ? ? ? ? return { ? ? ? ? ? ? //clickSwitch是子組件暴露的函數(shù) ? ? ? ? ? ? clickSwitch() { ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(type == 1){ ? ? ? ? ? ? ? ? ? ? initChinaMap(); ? ? ? ? ? ? ? ? ? ? setType(2); ? ? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? initWordMap(); ? ? ? ? ? ? ? ? ? ? setType(1); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ?? ? ? ? ? ? ? } ? ? ? ? } ? ? }) ? //你的return內容,注意ref ? ? ? return( ? ? ? ? <React.Fragment> ? ? ? ? ? ? ? <div id={"myWorldMap"} style={{ width: "800px", height: "400px" }} ?ref={mapRef}></div> ? ? ? ? ? </React.Fragment> ? ? ? ? ) } ? ? //最后要配合forwardRef MyWorldMap = forwardRef(MyWorldMap); export default MyWorldMap;
注:ref是子組件聲明的時候傳進來的,也就是
function MyWorldMap (props,ref){ //..你的代碼 } ? //export...
其實官方文檔給出來的例子是:
function FancyInput(props, ref) { ? const inputRef = useRef(); ? useImperativeHandle(ref, () => ({ ? ? focus: () => { ? ? ? inputRef.current.focus(); ? ? } ? })); ? return <input ref={inputRef} ... />; } FancyInput = forwardRef(FancyInput);
兩種方法都是可以的
父組件MyTrip
const myWordMapRef = useRef(); ? return( ? //省略一些代碼,注意ref ?<MyWorldMap proData = { myMapData} handleMapClick = {handleMapClick.bind(this)} ref={myWordMapRef}> ? ?</MyWorldMap> <div className={styles["mapButton-wrap"]}> ? ? ? ?<ButtonGroup> ? ? ? ? ? ? ? ?<Button onClick={() => myWordMapRef.current.clickSwitch()}>Switch</Button> ? ? ? ? ? ? ? ?<Button onClick={()=>clickAll() }>All</Button> ? ? ? ? </ButtonGroup> ?</div> )
現(xiàn)在你就可以在父組件里面通過myWordMapRef.current.clickSwitch()調用函數(shù)了
React Hook父組件提交子組件form
父組件
import React, { useState, useEffect, useRef } ?from 'react'; import { Button } from 'antd'; import EditClassA from './EditClassA'; export default (): React.ReactNode => { ?? ?const [isEdit,setIsEdit] = useState<boolean>(false); ?? ?const editClassARef = useRef(); ?? ?const handleSave = () => { ?? ??? ?// 調用子組件的方法 ?? ??? ?editClassARef.current.changeVal(); ?? ?} ?? ?return ( ?? ??? ?<div> ?? ??? ??? ?{!isEdit?( ?? ??? ??? ??? ?<Button style={{marginRight:20}} onClick={()=>setIsEdit(!isEdit)}>編輯</Button> ?? ??? ??? ?):( ?? ??? ??? ??? ?<Button style={{marginRight:20}} onClick={handleSave}>保存</Button> ?? ??? ??? ?)} ?? ??? ?</div> ?? ??? ?<EditClassA isEdit={isEdit} setIsEdit={setIsEdit} ref={editClassARef}/> ?? ?) }
子組件
import React, { useImperativeHandle, forwardRef } ?from 'react'; import { Form , Input } from 'antd'; import style from '@/pages/BackEnd/style.less'; const EditClassA = forwardRef((props, ref) => { ?? ?// props 里面有父組件的值和方法 ?? ?const [form] = Form.useForm(); ?? ?useImperativeHandle(ref, () => ({ ?? ??? ?changeVal: () => { ?? ??? ??? ?form ?? ??? ??? ?.validateFields() ?? ??? ??? ?.then( values => { ?? ??? ??? ??? ?// 調用父組件方法,設置父組件的值 ?? ??? ??? ??? ?props.setIsEdit(!props.isEdit) ?? ??? ??? ?}) ?? ??? ??? ?.catch(errorInfo => { ?? ??? ??? ??? ?return false ?? ??? ??? ?}) ?? ??? ?} ?? ?})); ?? ?return ( ?? ?<Form form={form} name="basic" colon={false} > ?? ??? ?<Form.Item ?? ??? ??? ?label="總部名稱" ?? ??? ??? ?name="name" ?? ??? ??? ?initialValue="總部" ?? ??? ??? ?rules={[{required: true,message: '請輸入總部名稱',}]}> ?? ??? ??? ?<Input className={props.isEdit?'':style.disabledInput} placeholder="請輸入" disabled={!props.isEdit}/> ?? ??? ?</Form.Item> ?? ?</Form> ?? ?); }) export default EditClassA
.disabledInput[disabled]{ ? color: rgba(0, 0, 0, 0.85); ? background-color: transparent; ? cursor: default; ? border: unset; ? border-bottom: 1px solid #333; }
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
react.js使用webpack搭配環(huán)境的入門教程
本文主要介紹了react 使用webpack搭配環(huán)境的入門教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-08-08react純函數(shù)組件setState更新頁面不刷新的解決
在開發(fā)過程中,經(jīng)常遇到組件數(shù)據(jù)無法更新,本文主要介紹了react純函數(shù)組件setState更新頁面不刷新的解決,感興趣的可以了解一下2021-06-06