React的hooks---useImperativeHandle

原创于 2023-07-26 16:37:00 发布 · 166 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端 #前端框架

本文介绍了如何在React中使用useImperativeHandle配合forwardRef来定制父组件通过ref访问的子组件方法。通过示例展示了如何创建一个FancyInput组件，允许父组件调用其聚焦方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 React.forwardRef 一起使用：

import React, { useRef, useImperativeHandle, useState } from 'react'

function FancyInput(props, ref) {
  const inputRef = useRef();
  // 自定义暴露给父组件的 ref 实例值
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} type="text" {...props} />;
}
// 通过 forwardRef 向父组件传递暴露的 ref
const ForwardFancyInput = React.forwardRef(FancyInput);

export default function Counter() {
  const [text, setText] = useState('');
  const inputRef = useRef();
  
  const onInputFocus = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <ForwardFancyInput ref={inputRef} value={text} onChange={e => setText(e.target.value)} />
      <button onClick={onInputFocus}>Input focus</button>
    </>
  );
}