React中父組件怎么獲取子組件的值或方法

這篇“React中父組件怎么獲取子組件的值或方法”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“React中父組件怎么獲取子組件的值或方法”文章吧。

父組件獲取子組件的值或方法

先來說下從哪獲取的啟發(fā)，想要從父組件獲取子組件的值或方法。。。

一次寫代碼的時(shí)候，用 Antd 中的 Modal 包裹了一個(gè)子組件，子組件中包含 input 輸入框，想要在點(diǎn)擊對話框上面確定按鈕時(shí)（即Modal 自帶的 onOk方法），拿到其中輸入的值

下面用一個(gè)父組件（Father.js）和子組件（Hearder.js）來演示如何能拿到值和方法：

方法一

給子組件添加屬性 ref='footer'

<Header ref='footer'></Header>

 然后在父組件用 this.refs.footer.xxx 的方式拿值

alert(this.refs.footer.state.sonmsg);//拿到子組件中state中的值
this.refs.footer.run();//拿到子組件中runn方法

方法二

給子組件添加 onRef={(ref) => { this.child = ref; }}

<Header onRef={(ref) => { this.child = ref; }}></Header>

然后在子組件中添加生命周期的 componentDidMount 這個(gè)方法：

componentDidMount() {
     if (this.props.onRef) {
        this.props.onRef(this);
     }
}

然后在父組件用 this.child.xxx 的方式拿值

alert(this.child.state.sonmsg);
this.child.run();

方法三

在父組件創(chuàng)建ref容器：this.pw = React.createRef()

constructor(props) {
    super(props);
    // 方法3：創(chuàng)建用來保存ref標(biāo)識(shí)的標(biāo)簽對象的容器
    this.pw = React.createRef()
}

然后給子組件添加屬性：ref={this.pw}

<Header ref={this.pw}></Header>

然后就可以在父組件用 this.pw.current 拿到子組件值和方法：

alert(this.pw.current.state.sonmsg); 
this.pw.current.run()

React函數(shù)式組件傳值之子傳父

在用react進(jìn)行函數(shù)式編程時(shí)，父組件可以通過props向子組件傳值，那么子組件怎么向父組件傳值呢？

首先，父組件需要向子組件傳遞一個(gè)函數(shù)，然后，子組件通過props獲取函數(shù)并附上參數(shù)，最后，父組件通過函數(shù)拿到子組件傳遞的值。

具體案例

父組件：home.tsx

import React, { useState } from 'react';
import Child from './component/child';
import './index.less';
 
const Home: React.FC = () => {
  const [parentCount, setParentCountt] = useState<number>(0);
 
  const getChildCount = (val: number) => {
    setParentCountt(val);
  };
 
  return (
    <div className="home-wrap">
      <p>我是父組件</p>
      <p>子組件傳過來的數(shù)字：{parentCount}</p>
      <Child getCount={getChildCount} />
    </div>
  );
};
 
export default Home;

子組件：child.tsx

import React, { useState } from 'react';
 
type selfProps = {
  getCount: Function;
};
 
const Child: React.FC<selfProps> = (props) => {
  const { getCount } = props;
  const [count, setCount] = useState<number>(0);
 
  const addCount = (val: number) => {
    setCount(val);
    getCount(val);
  };
 
  return (
    <div className="child-wrap">
      <p>子組件</p>
      <p>數(shù)字：{count}</p>
      <button onClick={() => addCount(count + 1)}>數(shù)字遞增</button>
    </div>
  );
};
 
export default Child;

效果展示

以上就是關(guān)于“React中父組件怎么獲取子組件的值或方法”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。