使用React Hook Form时，如何重置Choc-UI Chakra-Autocomplete组件？

问题分析 #

你遇到的核心问题是：Choc-UI的AutoComplete组件内部维护了独立的输入框状态，当React Hook Form调用reset后，虽然表单字段值已清空，但组件未同步更新输入框的显示内容，导致UI仍保留之前的选中值。

解决方案 #

通过以下两步修改即可解决：

1. 自定义Autocomplete组件添加状态同步逻辑

修改你的自定义Autocomplete组件，通过useRef获取AutoComplete实例，并监听传入的value变化，当值为空时调用组件内置的reset方法清空UI：

import { useRef, useEffect } from 'react';
import { Icon, InputGroup, InputRightElement } from "@chakra-ui/react";
import {
  AutoComplete,
  AutoCompleteInput,
  AutoCompleteItem,
  AutoCompleteList,
} from "@choc-ui/chakra-autocomplete";
import { FiChevronDown, FiChevronRight } from "react-icons/fi";

interface Props {
  onChange: (arg0: string) => void;
  list: { [key: string | number]: any }[];
  labelKey: string;
  valueKey: string;
  value?: string;
  placeholder: string;
}

const Autocomplete = ({
  onChange,
  list,
  labelKey: label,
  valueKey,
  value,
  placeholder,
}: Props) => {
  // 获取AutoComplete组件实例
  const autoCompleteRef = useRef<{ reset: () => void }>(null);

  // 监听value变化，为空时重置组件
  useEffect(() => {
    if (!value) {
      autoCompleteRef.current?.reset();
    }
  }, [value]);

  return (
    <AutoComplete 
      ref={autoCompleteRef}
      openOnFocus 
      onChange={onChange} 
      value={value}
    >
      {({ isOpen }: { isOpen: boolean }) => (
        <>
          <InputGroup>
            <AutoCompleteInput
              placeholder={placeholder}
              type="text"
              errorBorderColor="red.300"
            />
            <InputRightElement
              children={<Icon as={isOpen ? FiChevronRight : FiChevronDown} />}
            />
          </InputGroup>
          <AutoCompleteList>
            {list.map((_list, cid) => (
              <AutoCompleteItem
                key={`option-${cid}`}
                label={_list[label]}
                value={_list[valueKey]}
                textTransform="capitalize"
              >
                {_list[label]}
              </AutoCompleteItem>
            ))}
          </AutoCompleteList>
        </>
      )}
    </AutoComplete>
  );
};

export default Autocomplete;

2. 使用useWatch替代getValues同步表单值

在使用Autocomplete的地方，用React Hook Form的useWatch监听字段值变化，确保组件能及时响应值的更新（getValues不会触发组件重渲染，无法同步UI）：

import { useWatch } from 'react-hook-form';

// ...其他代码

<GridItem rowSpan={1} colSpan={1}>
  <FormControl isInvalid={!!errors.plan}>
    <FormLabel>Plan</FormLabel>
    <Autocomplete
      placeholder="Plan"
      labelKey="plan"
      valueKey="_id"
      list={plan}
      // 使用useWatch监听plan字段的实时值
      value={useWatch({ name: 'plan' })}
      onChange={(val) => setValue("plan", val)}
    />
    {errors.plan && (
      <FormErrorMessage>{errors.plan.message}</FormErrorMessage>
    )}
  </FormControl>
</GridItem>

原理说明 #

• 利用useRef获取Choc-UI AutoComplete的实例，调用其内置的reset方法可以直接清空输入框的显示内容并重置内部状态。
• useWatch会在表单字段值变化时自动触发组件重渲染，确保Autocomplete组件能接收到最新的空值，进而触发重置逻辑。

内容的提问来源于stack exchange，提问作者Muhammad Mubashirullah Durrani