如何在react.js中使用onclick事件处理程序调用类组件

Question

我有两个文件。File1是一个使用导出返回类的类组件。File2是一个正常的功能组件。我在文件2中有一个按钮，我想使用onclick事件处理程序来调用我在文件2中导入的文件1。我包含了部分代码。

import Comment from './commentForm';
<Button type="button" outline onClick= {***I want to call comment here***}>
Send Feedback
</Button>

注释在文件1上，按钮在文件2 上

Answer 1

您的按钮应该集成到包装组件中，这样做：

import React, { useState } from 'react'
import Comment from './commentForm';
const MyComponent = () => {
const [displayed, setDisplayed] = useState()
return (
<div>
{ displayed && <Comment /> }
<Button type="button" outline onClick={() => setDisplayed(true)}>
Send Feedback
</Button>
</div>
)
}
export default MyComponent

Answer 2

我假设，您想在另一个组件的点击处理程序中调用一个类组件方法，假设你有

1. 类组件：File1.jsx中的AClassComp
2. 另一个组件(函数或类(：File2.jsx中的ParentComp

您可以执行以下

// File1.jsx
Class AClassComp extends React.Component{
constructor(){ ...... }
someMethod1=()=>{}
someMethod2=()=>{}
...
render(){.....}
}
export default AClassComp;

//File2
import 'AClassComp' from './File1.jsx'
function ParentComp(){
const classCompRef = useRef(null);
const onClickButton= (e)=> {
// you can access the Class comp methods here 
// or do what ever you want using the AClassComp instance
classCompRef.current.someMethod1();
}
return (
<>
<AClassComp ref={classCompRef}/>
<Button onClick={onClickButton}
</>
)
}

当你引用一个类组件时，它会返回它的实例。

Answer 3

如果要从另一个文件导入功能组件，只需在onClick处理程序中添加变量即可。看看"Comment"到底做了什么可能会很有用？

import Comment from './commentForm';
<Button type="button" outline onClick= {Comment()}>
Send Feedback
</Button>

编辑：假设评论看起来像这样。。。

const Comment = () -> {
return comment
}
export default Comment