日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

作者：qing_小諾 ? 更新時間： 2022-10-07 編程語言

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

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

一次寫代碼的時候，用 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;

效果展示

原文鏈接：https://blog.csdn.net/qq_33237207/article/details/105294947

欄目分類
最近更新