React Hooks - 输入 1 个字符时输入失去焦点

React Hooks是React 16.8版本引入的新特性，它使我们能够在无需编写类组件的情况下使用状态和其他React特性。其中一个非常有用的特性是useState钩子，它允许我们在函数组件中使用状态。在本文中，我们将探讨如何使用React Hooks实现一个功能：在输入一个字符后，使输入框失去焦点。

jsx
import React, { useState } from 'react';
const InputFocus = () => {
  const [value, setValue] = useState('');
  return (
          type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}
export default InputFocus;

jsx
import React, { useState, useEffect } from 'react';
const InputFocus = () => {
  const [value, setValue] = useState('');
  useEffect(() => {
    if (value.length === 1) {
      const input = document.querySelector('input');
      input.blur();
    }
  }, [value]);
  return (
          type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}
export default InputFocus;