reactjs - 如何在组合反应钩子中调用函数？

Question

我有一个基本钩子（baseHook.js），其中包含一些功能。使用组合我试图在子钩子（formHook.js）中调用这些函数。

baseHook.js 如下

import React, { Fragment, useEffect, useState} from "react";
import PropTypes from "prop-types";
const BaseHook = ({ ...props }) => {
    const [show, setshow] = useState(false);
       
//when hovered on activeInput -->'activeInput' is declared but its value is never read.
    const activeInput = (input) => {
        setshow(true);
   
    }

    return (
        <Fragment>
            {props.children}
            {show ? <div>
               <p>Div is visible</p>
            </div> : null}
        </Fragment>
    );
};
BaseHook.propTypes = {
    activeInput:PropTypes.func,
};

export default BaseHook;

现在我正在尝试在另一个 formHook.js 中使用 baseHook.js，其中应该调用输入 activeInput 的 onFocus。

import React, { Fragment, useEffect, useState} from "react";
import BaseHook from "components/BaseHook";

const FormHook = ({ ...props }) => {

  return (
<BaseHook>
    <Fragment>  
      <input
        title= {"Input"}
        onFocus={() => activeInput(InputValue)}
        value={InputValue}
        className="required-field"
      />
    </Fragment>
<BaseHook> 
  );
     
};

export default FormHook;

没有从 baseHook 调用 activeInput 函数，因此无法 setshow(true)。我可以通过使用继承的 react-class 组件来实现这一点，但是有没有办法在 react-hooks 中调用组合中的函数？

标签： reactjsinheritancereact-hookscomposition