如何使用refs实现useInput钩子

import { useRef, useState } from 'react';

const useInput = (initialValue) => {
  const inputRef = useRef(null);
  const [value, setValue] = useState(initialValue);

  const onChange = (e) => {
    setValue(e.target.value);
  };

  return {
    value,
    onChange,
    ref: inputRef,
  };
};

export default useInput;

import React from 'react';
import useInput from './useInput';

const MyComponent = () => {
  const inputProps = useInput('');

  return (
    <div>
      <input type="text" {...inputProps} />
      <button onClick={() => inputProps.ref.current.focus()}>Focus Input</button>
    </div>
  );
};

export default MyComponent;