在事件处理程序ReactJS中调用外部函数

如何解决在事件处理程序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>
    </>
);

解决方法

当然，您需要做的就是在调用函数时将父级的状态正确传递给函数

SomeFunction({ state });

然后您可以这样做：

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