Как правильно привязать input к useForm()?

Question

[QnaTwitt]

Как правильно привязать все input к хуку useForm?
Вот код:

type FilterGroupData = {
  id: number;
  value: string;
  name: string;
  image?: string;
  isPopular?: boolean;
};

interface IMultiSelect {
  placeholder?: string;
  filterGroupData: FilterGroupData[];
}

const MultiSelect: FC<IMultiSelect> = ({ placeholder, filterGroupData }) => {
  const { register } = useFormContext();
  const [searchValue, setSearchValue] = useState('');
  const [debouncedSearchValue, setDebouncedSearchValue] = useState(searchValue);

  const searchFilter = (filterGroupDataBrand: FilterGroupData[], searchString: string) => {
    return filterGroupDataBrand.filter((item) => item.name.toLowerCase().includes(searchString.toLowerCase()));
  };

  const handleSearchValue = (event: ChangeEvent<HTMLInputElement>) => {
    if (Number(event.target.value) < 0) {
      setSearchValue('');
    } else {
      setSearchValue(event.target.value);
    }
  };

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      setDebouncedSearchValue(searchValue);
    }, 300);

    return () => {
      clearTimeout(timeoutId);
    };
  }, [searchValue]);

  const alphabeticalGroups = (objects: FilterGroupData[]): { [key: string]: FilterGroupData[] } => {
    const sortedObjects = objects.sort((a, b) => a.name.localeCompare(b.name));
    const groups: { [key: string]: FilterGroupData[] } = {};

    sortedObjects.forEach((object) => {
      const firstLetter = object.name[0].toUpperCase();
      if (!groups[firstLetter]) {
        groups[firstLetter] = [];
      }
      groups[firstLetter].push(object);
    });

    return groups;
  };

  const groups = useDeferredValue(alphabeticalGroups(searchFilter(filterGroupData, debouncedSearchValue)));

  const popularItems = filterGroupData.filter((item) => item.isPopular);
  const popular = filterGroupData.some((item) => item.isPopular);
  const hasNumberInName = filterGroupData.some((item) => !isNaN(Number(item.name)));

  return (
    <fieldset className="filter filter__item">
      <FormControl placeholder={placeholder} icon={<i className="icon icon-search" />}>
        <input placeholder=" " onChange={handleSearchValue} value={searchValue} />
      </FormControl>
      <div>
        {popular && !!!searchValue && (
          <div className="filter__item-popular">
            {popularItems.map(({ id, name }) => (
              <FormControl type="checkbox" key={id} placeholder={name}>
                <input type="checkbox" placeholder=" " />
              </FormControl>
            ))}
          </div>
        )}
        {!hasNumberInName
          ? Object.keys(groups).map((key, index) => (
              <Fragment key={index}>
                {/[a-zA-Z\u0400-\u04FF]/iu.test(key) ? (
                  <div className="filter__item-group" key={key}>
                    <span>{key}:</span>
                    {groups[key].map(({ id, name, value }, index) => (
                      <FormControl key={index} placeholder={name} type="checkbox">
                        <input type="checkbox" placeholder=" " name={value} />
                      </FormControl>
                    ))}
                  </div>
                ) : (
                  groups[key].map(({ id, name, value }) => (
                    <FormControl type="checkbox" placeholder={name} key={id}>
                      <input type="checkbox" placeholder=" " name={value} />
                    </FormControl>
                  ))
                )}
              </Fragment>
            ))
          : searchFilter(filterGroupData, debouncedSearchValue).map(({ id, name }) => (
              <FormControl type="checkbox" placeholder={name} key={id}>
                <input type="checkbox" placeholder=" " />
              </FormControl>
            ))}
      </div>
    </fieldset>
  );
};

export default MultiSelect;

Comments

[0xD34F]

!!!searchValue

А чо так мало? Может, лучше пять ! поставить? Или девять?

[szQocks]

Если я не ошибаюсь то ты register прокидываешь через контекст, жестко)

Тебе нужно было register прокинуть через пропсы либо своему мульти-селекту дать возможность прокидывать ref, тем самым обернуть компонент в forwardRef и на выходе бы получилось бы, что-то в этом роде <MultiSelect {...register("example")}/>

Answer 1

[versetty777]

В коде выше, в функции handleSearchValueиспользуется input с типом HTMLInputElement поэтому его можно привязать его к useForm:

<input placeholder=" " onChange={handleSearchValue} value={searchValue} ref={register} />

Для остальных input нужно добавить также ссылку на функцию register.

<input type="checkbox" placeholder=" " name={value} ref={register} />