React 搜索框输入框赋值：useState vs. useRef()

2024-03-17 02:21:00

为 React 搜索框输入框赋值的两种方法

介绍

为 React 应用中的搜索框输入框设置值至关重要。本文将深入探讨两种实现此目标的方法：状态管理（useState） 和React 钩子 useRef() 。

方法 1：使用状态管理（useState）

useState 是一种状态管理钩子，允许我们在函数组件中创建状态变量。对于搜索框，我们可以创建 search 状态，它存储输入框的当前值。当用户键入时，我们可以使用 setSearch 方法更新此状态：

const [search, setSearch] = useState('');

然后，我们可以使用 search 状态值查询 API 或执行其他操作。例如，可以在 useEffect 钩子中使用它来获取搜索结果：

useEffect(() => {
  fetch(`http://www.omdbapi.com/?s=${search}&apikey=a8b01dfe`)
    .then(response => response.json())
    .then(json => setData(json.Search))
    .catch(error => console.error(error))
}, [search]);

方法 2：使用 React 钩子 useRef()

useRef() 钩子让我们在函数组件中创建可变引用。我们可以使用它来指向输入框，如下所示：

const inputRef = useRef(null);

然后，我们可以使用 inputRef.current 访问输入框的当前值。例如，我们可以使用 inputRef.current.value 来获取输入值：

const handleSearch = (e) => {
  setSearch(inputRef.current.value);
}

结论

无论是使用 useState 还是 useRef() ，我们都是在使用受控组件 ，其中组件状态决定了输入框的值。这提供了更好的可控性和灵活性。

常见问题解答

哪种方法更适合？
- useState 更简洁、更简单，适用于处理简单数据。
- useRef() 允许更多灵活性，因为它提供了对 DOM 元素的直接访问。
受控组件有什么好处？
- 更好的状态管理
- 数据验证和处理更加容易
如何重置输入框的值？
- 使用 useState ：setSearch('')
- 使用 useRef() ：inputRef.current.value = ''
如何验证输入值？
- 使用 validation 库或编写自定义验证函数。
如何处理提交后的表单数据？
- 使用表单处理库（例如 Formik）或编写自定义处理函数。