将函数从功能组件传递给基于类的组件

Question

父组件如下

import React, { useState } from "react";
import EntityDefinition from "./EntityDefinition";
export default function EntitySelection(props) {
const testFun = () => {
console.log("Function activated");
};
return (
<>
<div>
<EntityDefinition                  
testFun={testFun}
/>{/**Calling a Class based Component*/}
</div>
</>
);
}

基于类的组件(子)

import React from "react";
import { ComboBox, DropdownOption, Button } from "react-widgets";
import axios from "axios";
export default class EntityDefinition extends React.Component {
render() {
return (
<React.Fragment>       
<div>
{" "}
<Button onClick={this.testFun}>Close</Button>{" "} {/*/Calling the function passed*/}
</div>
</React.Fragment>
);
}
}

但是当我点击按钮时，testFun函数没有被调用。我试过onClick={this.state.testFun},onClick={testFun}之类的东西但是什么都没有发生。谁能指出我哪里做错了?

Answer 1

testFun是一个道具。所以使用this.props.testFun

onClick={this.props.testFun}

Answer 2

testFun是一个道具，你正在使用ES6类组件，它接收道具作为一个道具对象，所以你可以尝试访问它如下

onClick={this.props.testFun}

Answer 3

你需要使用this来引用传递给基于类的组件的props。基于类的组件中的Props:文档

在您的示例中，您应该将onClick侦听器更改为:

<Button onClick={this.props.testFun}>