时间戳

首页 > 解决方案 > React Hooks & Typescript - 表单不受控制？

reactjs - React Hooks & Typescript - 表单不受控制？

问题描述

在使用了几个月的类组件之后，我第一次尝试了 Hooks 和 Typescript。

我正在尝试设置一个搜索栏，但由于某种原因我不能让它成为一个受控的控制形式。

我也不能使用 useState 将初始状态设置为空字符串 ''。

event.target.value 还返回“参数类型字符串不可分配给类型参数的错误。

我确实浏览了其他帖子，但我似乎无法控制表单并解决其他问题。下面是我的代码。我会很感激我能得到的任何意见。

import React, { FC, ChangeEvent, useState } from 'react';

interface SearchQueries {
  searchTerm: string;
}

const Search: FC<SearchQueries> = () => {
  const [searchTerm, setSearchTerm] = useState<{
    searchTerm: string;
  }>(''); **<-- Argument type of string is not assignable**

  const updateSearchTerm = (event: ChangeEvent<HTMLInputElement>) => {
    event.preventDefault();
    setSearchTerm(event.target.value);
  };

  return (
    <input
      type="text"
      placeholder="Enter cocktail name"
      // value={searchTerm} <-- tried commenting out to test if it's controlled (it's not)
      onChange={updateSearchTerm}
    />
  );
};

export default Search;

标签： reactjstypescript

解决方案

输入值所需要的只是一个字符串，因此您应该将其用于useState类型参数 - 或者，更好的是，完全不使用类型参数并让 TS 推断它（推断通常是可取的，因为它需要更少的代码和导致像这样的错误更少）：

const [searchTerm, setSearchTerm] = useState('');

这也将导致setSearchTerm(event.target.value);工作。

如果您想传递道具并将它们用作初始状态（如您FC<SearchQueries>所暗示的那样），那么您需要在参数列表中声明道具并使用它们：

const Search: FC<SearchQueries> = ({ searchTerm: initialSearchTerm }) => {
  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);

推荐阅读