如何从React.js中的另一个类组件调用方法 [英] How do I call a method from another class component in React.js

问题描述

所以我必须对组件进行分类:
类别1:具有点击按钮
Class2:有一个调用我的api的方法

基本上，我要调用的是一种方法，该方法可以设置和编辑来自另一个类的一个类内的状态.但是我一直失败.

So I have to class components:
Class1: has a clickbutton
Class2: has a method calling my api

Basically, what I want is to call a method that sets and edits states inside one class from another class. But I keep failing.

Class1.js
export class Class1 extends Component {
   render() {
      return (
         <div onClick={must call Class2Method}></div>
      )
   }
}

Class2.js
export class Class2 extends Component {
   Class2Method(){
      Here I call my API, I set & call states, ...
   }
   render {
      return (
         <Class1 />
         Here I return my API content
      )    
   }   
}

我尝试过的事情:

1. 我试图使用我的方法并在App.js(class2和class1的父级)中调用并设置状态.但是后来我的Class2.js控制台说找不到我的状态.
2. 我也尝试过:<我的第2类中的Class1 method = {this.Class2Method}/>且< div onClick = {this.props.method}>在Class1中.

推荐答案

去这里

Class1.js

Class1.js

       export class Class1 extends Component {
             render() {
                return (
                    <div onClick={this.props.callApi}></div>
                )
            }
       }

Class2.js

Class2.js

1. 在构造函数中绑定callApi函数或将其更改为箭头函数.

2. 将callApi方法传递给class1组件作为道具，并在上述组件中以this.props.callApi对其进行访问，并将其传递给div的onClick.

1. Either bind callApi function in constructor or change it to arrow function.

2. Passdown callApi method to class1 component as a prop and access it in the above component as this.props.callApi and pass it to onClick of div.

 export class Class2 extends Component {
       callApi = () => {
           Here I call my API, I set & call states, ...
        }
       render {
           return (
              <Class1 callApi={this.callApi} />
                   Here I return my API content
            )    
       }   
   }

这篇关于如何从React.js中的另一个类组件调用方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！