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

Question

是否可以在事件处理程序中调用外部函数？

我只是想运行单击外部函数，更重要的是我还想将一些状态作为 props 传递给外部函数。

示例代码如下：

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>
    </>
);

Answer 1

当然可以，你只需要在调用函数的时候将父级的状态正确传递给函数即可

SomeFunction({ state });

然后你可以做：

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

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

Invoke external function in event handler (ReactJS)

import

event-handling

reactjs

react-hooks