尝试使用ref访问子组件中的父函数
在React中，可以使用ref来访问子组件中的父函数。ref是一个特殊的属性，可以在组件中使用它来引用其他组件或DOM元素。
为了实现在子组件中访问父组件的函数，可以按照以下步骤进行操作：
- 在父组件中，创建一个
ref对象。可以使用React.createRef()来创建一个ref对象，并将其赋值给一个变量，例如parentRef。
import React, { Component } from 'react';
class ParentComponent extends Component {
parentRef = React.createRef();
render() {
return (
<div>
<ChildComponent parentRef={this.parentRef} />
</div>
);
}
parentFunction() {
// 父函数的实现逻辑
}
}- 在子组件中，通过
props将父组件的ref传递给子组件。
import React, { Component } from 'react';
class ChildComponent extends Component {
render() {
return (
<div>
<button onClick={this.handleButtonClick}>访问父函数</button>
</div>
);
}
handleButtonClick = () => {
this.props.parentRef.current.parentFunction();
};
}在子组件中，可以通过this.props.parentRef.current来访问父组件的ref对象，并使用点语法访问父组件中的函数。在上面的例子中，当按钮被点击时，会调用父组件的parentFunction函数。
这样，通过使用ref来访问子组件中的父函数，实现了父子组件之间的通信。这种方式在需要在子组件中触发父组件中的特定函数时非常有用。
腾讯云相关产品和产品介绍链接地址：
相关·内容
我正在使用组件实现一些画布渲染。我有以下组件，它尝试将画布布局到页面，并让Stage组件中的子组件绘制到其上下文中。
我需要一个对Renderer组件呈现的画布元素的引用。因此，我在JSX中请求ref，并在获得它时将其设置在我的组件上。我还使用了React上下文，这样所有子组件都可以访问这个画布引用。我遇到的问题是，似乎在分配画布引用之前调用了getChildContext，所以所有子组件都访问一个未定义的画布，并且没有完成任何绘制。
export default class Renderer extends React.Component {
static childContext
浏览 4提问于2017-08-21得票数 6
回答已采纳
1回答
我试图实现的目标：从嵌套元素中获取数据。
如何实现它：使用子元素的ref属性在父元素中获取该元素。无法工作，因为this.refs似乎只包含顶部组件中的refs，而不是嵌套组件。
SubmitStoryForm.jsx有嵌套组件TextInput.jsx，这是一个简单的<input />组件。
所以我的表单中有两个元素，SubmitStoryForm.jsx
<TextInput label="Story name" refer="titleInput" />
<textarea className="materialize
浏览 0提问于2016-05-17得票数 0
回答已采纳
下面是我从firebase检索数据并在引导转盘中查看数据的代码。我可以在控制台中看到这些值，但是我不能在另一个组件的道具中获取它。
class JobOfferSlider extends Component {
componentDidMount = () => {
var ref = fire.database().ref("Employers/Employer1");
ref.orderByKey().on("child_added", (snapshot) => {
this.
浏览 0提问于2019-01-23得票数 0
2回答
儿童班：
interface Props {
name: string;
mac: string;
}
export const BluetoothDeviceItem = (Props, { }) => {
const [connectingState, setConnectingState] = useState('not_connected');
useEffect(() => {
stateChangeCallback();
}, [connectingState]);
const { on
浏览 2提问于2020-07-31得票数 1
回答已采纳
Child.js： export default class Child extends Component {
testFunc = () => {
console.log("test")
}
componentDidMount() {
this.props.onRef(this)
} Parent.js： export default class Parent extends Component {
render() {
return (
<>
<Child onRef = {ref =&
浏览 15提问于2020-07-13得票数 0
回答已采纳
4回答
假设我有以下代码：
<View>
<ComponentA>
<TouchableHighLight onPress={this.refs.componentB.foo.bind(this)}><Text>Hey</Text></TouchableHighLight>
</ComponentA>
<ComponentB ref='componentB'>
....
</ComponentB>
</View>
浏览 3提问于2016-05-18得票数 0
回答已采纳
2回答
我有一个包含表单的子组件：
<el-form :model="abc" ref="ruleForm" :rules="rules">
<el-form-item prop="files">
<abc-card :title="getTranslation('abc.files')">
<file-selector v-model="abc.files" />
</ab
浏览 10提问于2022-09-14得票数 0
回答已采纳
我有一个父组件和一个子组件。我需要访问子组件中父组件的HTMLelement。
我有一个有效但不干净的解决方案，在父母的componentDidMount中涉及this.setState({ domNode: ReactDOM.findDOMNode(this) });，这在很多层面上都是错误的。
如何在父对象中使用createRef()将其ref作为道具传递给子对象，然后如何从ref中获取类型为HTMLElement的DOM节点？
浏览 3提问于2019-03-01得票数 11
回答已采纳
我有子组件：
import * as React from "react";
import {Component} from "react";
import {connect} from "react-redux";
class Child extends Component<any, any> {
childFunction = () => {
console.log('childFunction');
};
render() {
return &l
浏览 16提问于2019-07-13得票数 0
我有一个组件
<template>
<div class="section">
<a v-if='type == "events"' class="button is-primary" @click="showForm()">
<i class="fa fa-calendar"></i>  <span class="card-stats-key">
浏览 3提问于2017-04-07得票数 2
2回答
我正在将一个应用程序从KnockoutJS迁移到VueJS。我很难将模板转换成组件。它类似于一个选项卡结构，其中只有一个项可以是活动的，这是使用一个可观察的名为isActive的控件来控制的，我已将其更改为ref。当用户单击某项时，我希望循环遍历父级列表中的子组件，并将isActive值设置为false，然后将单击项上的isActive设置为true。
我已经能够更新单击项的isActive值，但是我看不到父项上的isActive ref值。如何从父级获取子组件及其数据？
这里有一个代码的例子。
浏览 9提问于2022-04-07得票数 2
回答已采纳
<template>
<RecyclablesPopup ref="LVP" class="inline-block m-5px"></RecyclablesPopup>
</template>
<script setup>
import RecyclablesPopup from "../components/popups/RecyclablesPopup";
import { ref } from 'vue&#
浏览 11提问于2022-07-11得票数 0
回答已采纳
2回答
孩子 import React, { useState } from 'react';
import { ref, update, get,} from "firebase/database";
import { database } from '../../utils/firebase';
import './Card.css';
function Card(props) {
const [uid, setUID] = useState(props.uid);
function completeCard(
浏览 21提问于2021-09-08得票数 0
3回答
我有一个网格组件，如下所示：
import React, { Component } from 'react';
import Action from './action.jsx';
class Grid extends Component {
constructor(props) {
super(props);
this.maxN = 110;
this.tempArray = [];
this.question;
}
getRandomN() {
浏览 2提问于2017-08-24得票数 7
回答已采纳
3回答
我想使子组件具有ref，但我不希望用户在创建组件时必须指定ref。假设我有这样的东西：
<Parent>
<Child />
<Child />
</Parent>
我希望父组件能够访问子组件的状态。最简单的方法是为每个组件添加一个引用，但我希望这是在constructor()函数期间所做的事情，以便从最终用户那里抽象出来，因为我希望这些组件是通用的。
有没有一种干净的方法让父组件可以访问子组件的状态，比如当子组件被创建时，你会有类似这样的东西：
class Child extends Component {
constr
浏览 2提问于2017-03-05得票数 3
回答已采纳
主要应用程序组件中的代码如下：
class App extends Component {
componentDidMount(){
console.log(this.ref);
debugger;
}
render() {
return (
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
);
}
}
使用{this.pr
浏览 3提问于2016-10-17得票数 21
我已经为Vue组件编写了一个自定义呈现函数，但是当我在传递给createElement函数的数据对象中设置"ref“属性时，根vm的$refs (VueComponent)中没有显示任何内容
Vue.component('sm-form-row', {
render: function (createElement) {
// Create the Row Div and append the columns
return createElement('div', {
浏览 0提问于2018-05-12得票数 0
class AUsers extends React.Component {
constructor(props) {
super(props);
this.list = React.createRef();
}
handleChangeDataList = () => {
this.list.current.reloadAUserTable();
}
render(){
return(
<AUserList
ref={(ref) => { this.list = ref; }}
/>
浏览 0提问于2020-03-02得票数 1
我有两个组件(Q1和RepConfig)。我正在尝试在RepConfig中导入Q1组件，以便可以反复使用它。Q1组件使用一个简单的数组指向一个Vue商店(dscpValues.js)：
export default {
namespaced: true,
state: {
dscpData: [
{ id: 'cs0', value: 'CS0' },
{ id: 'cs1', value: 'CS1' },
{ id:
浏览 0提问于2021-04-23得票数 0
1回答
我希望引用位于子组件中的元素。我从它的父组件中使用document.getElementById，它工作得很好，但是我听说使用ref是更好的实践。这是真的吗？如果是的话，是如何做到的？
父(容器)组件：
import CanvasView from '../view/CanvasView'
export default class CanvasContainer extends Component {
componentDidMount(){
var c = document.getElementById('canvas')
//DO SO
浏览 1提问于2016-06-04得票数 0
使用Eric的答案从，我想限制创建的组件数量。然后，在删除组件之后，我尝试将该事件发送给父程序，以便父程序知道当前创建的组件的数量。
在这个中，我将组件的数量限制为4，然后我试图发出一个事件来降低计数。事件没有发出信号。如何从动态添加的组件中发出事件？
// dynamic component
@Component({
selector : 'dynamic',
template : `
<div>
Component number {{_idx}} <button (click)="remove()"&
浏览 3提问于2016-03-26得票数 19
回答已采纳
我知道什么是中的引用。我所面临的挑战是我没有找到任何关于innerRef的官方文档。它还在使用吗？
我从那里了解到了innerRef：
<ReferenceBox innerRef={ref}>
<a
href="https://github.com/FezVrasta/react-popper"
target="_blank"
>
react-popper
</a>
</ReferenceBox>
如果有人能告诉我什么是innerRef，那就太好了。谢谢!
浏览 1提问于2018-11-09得票数 10
回答已采纳
1回答
这可能看起来有点多余的问题，但我正在尝试访问React中孩子的最终状态，在它更新之后。我已经查看了React LifeCycle的文档(我认为这可能是问题所在，但不确定)，到处都找遍了，也没能完全弄清楚。
我有一个组件，它需要访问子对象状态的(最终)值，一旦该子对象完成了一些更新(AJAX请求，然后执行几个this.setStates)。
到目前为止，我可以通过ref (在componentDidMount中)访问该子对象的整个状态，但是当我试图访问该状态的特定值时，它返回null或undefined。
下面是一些示例代码进行解释(我将尽可能多地省去无用的代码)：
class Layout e
浏览 0提问于2016-08-16得票数 0
我正在尝试创建一个组件来跟踪垂直滚动。问题是-实际滚动容器很难预测(在这种特定情况下，它既不是window、document，也不是body --由于CSS溢出规则，它是div#__next )。
我想保持组件的灵活性和自制力。所以我用DOM选择器作为参数创建了一个ref。我知道它远不是惯用的(至少可以这么说)，但令人吃惊的是，它似乎正在起作用：
// Parent component
import { useRef } from "react"
const Article = (props) => {
const scrollContainerRef = useR
浏览 3提问于2022-01-12得票数 3
回答已采纳
5回答
我想从父级获取vue.js组件的维度(我正在使用实验性的)。
当我在组件中使用ref时，它会像预期的那样工作。我知道尺寸：
// Child.vue
<template>
<div ref="wrapper">
// content ...
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
const wrapper = ref(null)
onMounted(() => {
cons
浏览 4提问于2021-04-10得票数 25
回答已采纳
1回答
概述：
示例布局：
A B C D E F
G H I J
我有一个项目格(A，B，C，D，E，F)。当一个项目被点击(C)时，下面会出现一个子项目列表(G，H，I，J)。为了在选项卡中访问这个选项，一旦单击了一个项，焦点就移到子项列表中。然而，一旦所有这些项目都通过，我想重点转移到下一个主要项目(D)。
问题：
我正在添加参考到A，B，C，D，E和F，但我似乎不能访问我的网格中的裁判，以更新焦点。
//项目
constructor(props) {
super(props);
this.ref = React.createRef();
}
getItemRef() {
浏览 0提问于2019-02-20得票数 0
1回答
我相信我正在尝试完成一件简单的事情，但是失败了。 React并没有像我希望的那样从另一个组件的ChildComponent中调用'alertFunc()‘。 下面是ChildComp： class ChildComp extends React.Component {
constructor(props) {
super(props);
this.state = { };
this.input = React.createRef();
}
alertFunc = () => {
alert
浏览 15提问于2020-07-13得票数 0
回答已采纳
4回答
我有一个<Parent>，它包含一个组件<Child>，我希望能够在父类中调用一个<Child>的方法。在看了很多其他的帖子之后，这就是我拥有的：
Child.js
export default class Child extends Component {
method1() {
console.log("success");
}
render() {
return(
<View/>
)
}
}
亲本
export default class Parent extends Co
浏览 0提问于2019-03-16得票数 5
我是第一次接触reactnative
我正在使用FlatList和app.js，并使用StackNavigator在场景之间导航，如下所示：
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Content',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
浏览 35提问于2017-07-21得票数 0
回答已采纳
我有一个有两个按钮的组件，每个按钮都有一个独特的功能：
<template>
<v-container>
<v - button ref = "button" / >
<v - button ref = "buttons" / >
</v-container>
</template>
如何处理父程序中的两个按钮，以及如何应用我的两个函数，我已经在父函数中编写了它们。
<Button @click="refer to the two
浏览 1提问于2021-12-22得票数 2
回答已采纳
我有两个React组件，Parent和Child，每个组件在自己的文件中都是单独的模块。我使用的是Redux，所以两者都是"export default compose"...
在父级的构造函数中：
this.myChild = React.createRef();
<Child ref={this.myChild} />
子对象定义了方法：
getAlert() {
//do something
}
我正在尝试调用Parent的一个方法：
this.myChild.current.getAlert();
但我得到了：
this.myChild.current.g
浏览 2提问于2019-01-07得票数 0
1回答
前言
在Option中，我能够在不失去任何反应性的情况下直接变异实例data属性。如所述。
如果您问为什么，并不是所有东西都是用Vue编写的，而且在某些情况下，外部JS库必须更改Vue实例中的某些值。
例如：
document.app = createApp({
components: {
MyComponent, //MyComponent is a Option API
}
})
//Somewhere else
<MyComponent ref="foo"/>
然后，组件状态可以按以下方式进行更改：
//Console:
浏览 3提问于2022-08-17得票数 0
回答已采纳
我正在读，上面写着：
虽然可以向子组件添加ref，但这并不是理想的解决方案，因为您将只获得组件实例而不是DOM节点。此外，这将不适用于功能组件。
有人能解释原因吗？
浏览 1提问于2018-08-23得票数 3
1回答
如何在类组件中使用forwardRef与react-redux的连接函数
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';
class ParentComponent extends Component {
constructor(props) {
super(props);
this.myRef = React.createRef();
}
render() {
return <ChildCompon
浏览 3提问于2020-10-21得票数 0
24回答
我有两个组件：
父组件
我试图从Parent调用Child的方法，我尝试了这种方法，但没有得到结果：
class Parent extends Component {
render() {
return (
<Child>
<button onClick={Child.getAlert()}>Click</button>
</Child>
);
}
}
class Child extends Component {
getAlert() {
alert(&#
浏览 40提问于2016-06-22得票数 743
回答已采纳
我已经为包含地址字段、输入框和SelectItems的示例创建了FC say子组件，当从另一个组件父级调用此FC时，我需要访问输入框的值并选择用户添加的项。
您能给我一个简单的例子，比如父组件通过函数组件样式TypeScript调用时子组件中的1文本框。
下面是具有两个输入和一个SelectItem的子组件的示例代码
return (
<>
<Accordion varient={'grouped'} expanded theme={theme}
items={[
{
浏览 5提问于2022-08-31得票数 0
有两个组件有一个父组件，我想通过它们的父组件在另一个组件中触发一个操作。到目前为止，我已经尝试过：
_mevent_show.js.jsx (组件之一)：
gotoSearchPage() {
this.props.gotoSearchPage()
},
return (
<i className="fas fa-search"
onClick={this.gotoSearchPage}>
</i> )
_body.js.jsx (父母)
gotoSearchPage() {
this.calendar.changePro
浏览 1提问于2019-12-31得票数 1
回答已采纳
假设我有两个组件Component1和Component2。我在Component1里有一个按钮。
const Component1 = () => {
return(
<div>
<button onClick={()=>someExportFunc()}>Export</button>
<Component2 />
</div>
)
}
我的Component2.jsx就是这样的。
import {ChartComponent} from '
浏览 2提问于2022-07-06得票数 2
1回答
我想创建一个Portal组件，它应该附加到它的容器组件，但不是通过容器的ID，而是通过它的ref。换句话说，我不想将document.getElementById('CONTAINER_ID')作为第二个参数传递给ReactDOM.createPortal函数，而是完全依赖于React.forwardRef传递的容器的引用。有没有一种简单的方法来实现这一点？否则，我可能需要先创建一个“附加”到ref的dom节点，然后将该节点作为第二个参数传递给createPortal函数？我希望尽可能避免分配I。以下是示例代码(我在TypeScript中工作)： export default
浏览 24提问于2021-10-24得票数 0
4回答
我尝试将当前组件的引用传递给子组件，如下所示：
<template>
<div class="screen" ref="screen">
<child-component :screenRef="screenRef">
</child-component>
</div>
</template>
<script>
const Parent = {
name: 'parent'
浏览 0提问于2018-08-03得票数 20
我有一个关于Angular2 +(不是AngularJs)的问题。我是一个Vue.js程序员，我很好奇它是否有可能在角度上。
假设您的应用程序具有许多执行许多任务的模块。您有一个前端应用程序负责监视模块状态；显示日志、错误、通知用户某些模块已经完成工作等。这些模块通过WebSocket (或STOMP)与前端对话。如果前端接收到消息，则必须对其进行处理，并且必须更新模块的相应状态(例如标题)。因此，如果角接收到消息，他必须动态选择子组件并更新其状态(调用子方法)。
这是它在Vue.js:中的样子
父组件的内容：
<module ref="moduleA" ><
浏览 1提问于2018-09-11得票数 3
回答已采纳
2回答
我正在尝试调用.slideNext() &当用户按下箭头键时随附的.slidePrev。
我在querySelector中成功地做到了这样的工作：
const changeSlide = (event: KeyboardEvent) => {
const slides = document.querySelector('.swiper').swiper
if(event.key === 'ArrowLeft') {
slides.slidePrev();
} else if (event.key ===
浏览 33提问于2022-06-28得票数 0
对于访问组件中的指令，我尝试了，但这并不适用于组件的子组件中的指令。
子组件是使用ViewContainerRef动态创建的。
@ViewChildren(ViewRefDirective) allMyDirectives;
//This doesn't work for directives in the child components
我有多个不同的子组件，这就是为什么我不能在ViewChild中指定单个子组件的名称来访问它的指令。
指令
@Directive({
selector: '[view-ref-host]',
})
export class
浏览 0提问于2018-06-19得票数 1
回答已采纳
我在react-native中有一个搜索栏组件，它是在父组件中导入的，
SearchBar子组件具有以下元素：
<Search
ref={component => this._search = component}
onChangeText={this.searchUpdated}
blurOnSubmit
useClearButton={false}
backgroundColor='#15A5E3'
/&
浏览 1提问于2018-06-11得票数 2
2回答
我正在尝试创建一个组件库的可视化表示。我使用动态<component>来呈现每个组件。然而，当我用它的插槽填充组件时，由于缺少父方法，我遇到了问题。
我希望组件是可用的(演示)，因此我需要补偿this.$parent不工作。
<template>
<component v-bind:is="'s-' + comp.name" v-bind="props" ref="comp"> <!-- this is the corrent parent-->
<div v-i
浏览 1提问于2020-03-05得票数 1
我想向<ais-search-box>元素(呈现的输入字段)添加一个ref='foo'，这样如果需要，我就可以动态地将.focus放在它上面。但是如何添加ref=[..]呢？我当前的代码是：
<ais-search-box ref="foo">
<div slot="submit-icon"><i class="fas fa-search text-xl p-2 text-blue-400"></i></div>
</ais-search-box
浏览 4提问于2020-08-03得票数 1
我曾经有一个这样的组件：
class BlahDumb extends Component {
toggleMe = () => console.log('toggling')
render() {
...
}
}
然后我会像这样使用它：
class App extends Component {
doIt = () => this.el.toggleMe()
refEl = el => this.el = el;
render() {
return (
<div&g
浏览 2提问于2017-07-28得票数 4
2回答
谷歌在这个被广泛讨论的话题上有很多，但是，我找不到一个清晰的解决方案来解决我的问题(可能是一个常见的问题)。
我有一个父组件和一个子组件(参见下图)，其中子组件生成要存储在某处的值，父组件有一个触发存储操作的按钮：
在这种情况下，父级不希望设置或修改任何子道具或状态，而是从中获得一些价值。
在我看来，最好的方法是使用ref并调用子组件方法来获取值；但是，我正在非常努力地避免使用ref，因为任何react文档都表明了这一点。
这是一个用例，我更好地使用参考，还是我错过了一个更好的方法？在这种情况下使用参考文献有哪些缺点？
浏览 0提问于2018-02-27得票数 0
回答已采纳
1回答
我看到关于vue $ref的文档，控制台看到的是{}，我不知道如何得到id的值？{ }没有对象，如何获得$ {} id的值，但我认为这个{}没有达到目标，我试着使用console.log(this.$refs.dataInfo.id)是undefined。
看看这幅画：
javascript文件：
console.log(this.$refs)
HTML文件：
<tab-item v-for="item in category" :id="item.id" ref="dataInfo">{{item.name}}</tab
浏览 0提问于2018-01-21得票数 3
回答已采纳
我在reactjs和学习零星知识方面是个新手。我正面临着一个问题。场景是这样的。我有一个功能组件作为父组件。它有一个子组件作为类组件。我想在单击父组件的按钮时设置或重置子组件的状态。或者有没有办法从父组件调用子组件的any方法。我试过了
// this call from a functional component.
<PhotoPreviewUploaend setSelectedFile={setSelectedFile} ref={setImagePreviewUrl} />
稍后，在单击按钮后，会执行以下操作：
setImagePreviewUrl('
浏览 6提问于2020-02-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
