Вызов внешней функции в обработчике событий (ReactJS)

#reactjs #import #event-handling #react-hooks

#reactjs #импорт #обработка событий #реагирующие крючки

Вопрос:

Возможно ли вызвать внешнюю функцию в обработчике событий?

Я просто хочу запустить внешнюю функцию по щелчку мыши, проблема в том, что я также хочу передать некоторое состояние в качестве реквизита внешней функции.

Пример кода ниже:

child.js

  import React from 'react';

 export const SomeFunction =  (props) => {
 //some logic to invoke
 };
  

parent.js

 import React, { useState } from 'react';

import { SomeFunction} from './external';

export default function Parent = () => {
const [state, setState] = useState({
        //some state here
});

const handleSubmit = (e) => {
e.preventDefault();

//IS SOMETHING LIKE THIS POSSIBLE???
SomeFunction();


};

return (
    <>
    <button onClick={handleSubmit}>Click me</button>
    </>
);
  

Ответ №1:

Конечно, все, что вам нужно сделать, это правильно передать родительское состояние функции при вызове функции

 SomeFunction({ state });
  

и тогда вы можете сделать:

 export const SomeFunction = (props) => {
  console.log(props.state);
};