React中父組件如何獲取子組件的值或方法

Posted on by

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

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

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

下面用一個父組件（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 這個方法：

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

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

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

方法三

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

constructor(props) {
    super(props);
    // 方法3：創建用來保存ref標識的標簽對象的容器
    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函數式組件傳值之子傳父

在用react進行函數式編程時，父組件可以通過props向子組件傳值，那麼子組件怎麼向父組件傳值呢？

首先，父組件需要向子組件傳遞一個函數，然後，子組件通過props獲取函數並附上參數，最後，父組件通過函數拿到子組件傳遞的值。

具體案例

父組件：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>子組件傳過來的數字：{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>數字：{count}</p>
      <button onClick={() => addCount(count + 1)}>數字遞增</button>
    </div>
  );
};
 
export default Child;

效果展示

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：