React.js 使用ImperativeHandle 附加钩子

useImperativeHandle钩子在 useRef 钩子的类似阶段工作，但它只允许我们修改将要与 ref 对象一起传递的实例，该对象提供对任何 DOM 元素的引用。虽然这个钩子在极少数情况下使用，但它具有一些最高级的功能。

句法：

useImperativeHandle(ref, createHandle, [deps])

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序。
```
npx create-react-app functiondemo
```
第 2 步：创建项目文件夹（即 functiondemo）后，使用以下命令移动到该文件夹。
```
cd functiondemo
```

项目结构：它将如下所示。

项目结构

示例：在此示例中，我们将构建一个自定义输入按钮，该按钮在焦点上执行自定义用户定义。这是我们将在App.js文件中导入的自定义输入字段。

Input.js

import React, { useRef, useImperativeHandle, forwardRef } from 'react';
  
function Input(props, ref) {
  const btn = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      console.log('Input is in focus');
    },
  }));
  return ;
}
  
export default forwardRef(Input);

App.js

import React, { useRef } from 'react';
import Input from './Input';
  
const App = () => {
  const inputRef = useRef(null);
  return (
    
       inputRef.current.focus()} 
      ref={inputRef} />
    
  );
};
  
export default App;

应用程序.js

import React, { useRef } from 'react';
import Input from './Input';
  
const App = () => {
  const inputRef = useRef(null);
  return (
    
       inputRef.current.focus()} 
      ref={inputRef} />
    
  );
};
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

参考： https://reactjs.org/docs/hooks-reference.html#useimperativehandle