React useImperativeHandle的使用场景和代码演示

7 min read

useImperativeHandle是用于从子组件向父组件暴露方法的Hooks函数。它的作用类似于class组件中的ref，但更加灵活且易用。

使用场景：

  • 子组件需要暴露一些方法供父组件调用，例如表单组件需要提供提交表单的方法。
  • 子组件需要暴露一些数据供父组件获取，例如视频组件需要提供视频播放状态。

示例代码：

import React, { forwardRef, useImperativeHandle, useState } from 'react';

// 子组件
const MyInput = forwardRef((props, ref) => {
  const [value, setValue] = useState('');

  // 暴露方法
  useImperativeHandle(ref, () => ({
    getValue: () => value,
    clearValue: () => setValue('')
  }));

  return (
    <input
      type="text"
      value={value}
      onChange={event => setValue(event.target.value)}
    />
  );
});

// 父组件
export default function App() {
  const myInputRef = useRef();

  const handleSubmit = () => {
    const value = myInputRef.current.getValue();
    console.log(value);
  };

  return (
    <>
      <MyInput ref={myInputRef} />
      <button onClick={handleSubmit}>提交</button>
    </>
  );
}

在上面的示例代码中，子组件MyInput使用useImperativeHandle暴露了getValue和clearValue两个方法，这两个方法可以在父组件中通过调用ref.current.getValue()和ref.current.clearValue()获取和清空文本框的值。父组件中的handleSubmit方法演示了如何调用子组件中的方法获取文本框的值。