快捷導(dǎo)航

React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)

更新時(shí)間：2022年09月15日 14:28:03 作者：c_y_yuan

這篇文章主要介紹了React Hook父組件如何獲取子組件的數(shù)據(jù)/函數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React Hook父組件獲取子組件數(shù)據(jù)/函數(shù)

我們知道在react中，常用props實(shí)現(xiàn)子組件數(shù)據(jù)到父組件的傳遞，但是父組件調(diào)用子組件的功能卻不常用。

文檔上說(shuō)ref其實(shí)不是最佳的選擇，但是想著偷懶不學(xué)redux，在網(wǎng)上找了很多教程，要不就是hook的講的太少，要不就是父子組件傻傻分不清，于是只好再啃了一下文檔，就學(xué)了一下其它hook的api。

在這里我們需要用到useImperativeHandle這個(gè)api，其函數(shù)形式為

useImperativeHandle(ref, createHandle, [deps])

其實(shí)這個(gè)api也是ref的一種形式，但是相當(dāng)于做了一定的優(yōu)化，可以選擇讓子組件只暴露一定的api給父組件，根據(jù)在文檔和其他博客上給出的方法

一共有兩大步驟：

1.將ref傳遞到子組件中
2.需要使用forwardRef對(duì)子組件進(jìn)行包裝

子組件MyWorldMap

?const mapRef = useRef(null);
? ? useImperativeHandle(ref, () => {
?
? ? ? ? return {
? ? ? ? ? ? //clickSwitch是子組件暴露的函數(shù)
? ? ? ? ? ? clickSwitch() {
? ? ? ? ? ? ?
? ? ? ? ? ? ? ? if(type == 1){
? ? ? ? ? ? ? ? ? ? initChinaMap();
? ? ? ? ? ? ? ? ? ? setType(2);
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? initWordMap();
? ? ? ? ? ? ? ? ? ? setType(1);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ??
? ? ? ? ? ? }
? ? ? ? }
? ? })
?
//你的return內(nèi)容，注意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是子組件聲明的時(shí)候傳進(jìn)來(lái)的，也就是

function MyWorldMap (props,ref){
//..你的代碼
}
?
//export...

其實(shí)官方文檔給出來(lái)的例子是：

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)在你就可以在父組件里面通過(guò)myWordMapRef.current.clickSwitch()調(diào)用函數(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 = () => {
?? ??? ?// 調(diào)用子組件的方法
?? ??? ?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 => {
?? ??? ??? ??? ?// 調(diào)用父組件方法，設(shè)置父組件的值
?? ??? ??? ??? ?props.setIsEdit(!props.isEdit)
?? ??? ??? ?})
?? ??? ??? ?.catch(errorInfo => {
?? ??? ??? ??? ?return false
?? ??? ??? ?})
?? ??? ?}
?? ?}));
?? ?return (
?? ?<Form form={form} name="basic" colon={false} >
?? ??? ?<Form.Item
?? ??? ??? ?label="總部名稱(chēng)"
?? ??? ??? ?name="name"
?? ??? ??? ?initialValue="總部"
?? ??? ??? ?rules={[{required: true,message: '請(qǐng)輸入總部名稱(chēng)',}]}>
?? ??? ??? ?<Input className={props.isEdit?'':style.disabledInput} placeholder="請(qǐng)輸入" 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;
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: