Как вызвать компонент класса с помощью обработчика событий onclick в react. js

Question

У меня два файла. File1 - это компонент класса, возвращающий класс с помощью экспорта. File2 - это обычный функциональный компонент. У меня есть кнопка в File2. Я хочу использовать обработчик событий onclick для вызова моего файла file1, который я импортировал в file2. Я включаю части своего кода.

import Comment from './commentForm';

<Button type="button" outline onClick= {***I want to call comment here***}>
  Send Feedback
</Button>

Комментарий - файл1, а кнопка - файл2

Answer 1

Я полагаю, вы хотите вызвать метод / ы компонента класса в обработчике кликов другого компонента, допустим, у вас есть

1. Компонент класса: AClassComp в File1.jsx
2. другой компонент (функциональный или класс): ParentComp в File2.jsx

вы можете сделать следующее

// 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 2

Если вы импортируете функциональный компонент из другого файла, вы можете просто добавить переменную в обработчике onClick. Может быть полезно посмотреть, что на самом деле делает «Комментарий»?

Answer 3

Ваша кнопка должна быть интегрирована в компонент упаковки, сделайте что-то вроде этого:

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