Использовать массив строк в форме React Hook

В форме, которую я создаю, материал, который создается в форме, должен иметь несколько вариантов ширины, которые можно добавить. Это означает, что у меня будет ввод текста, где пользователь может добавить опцию, и когда эта опция будет добавлена, она должна быть добавлена ​​в массив React Hook Form widthOptions, без использования обычного состояния реакции. Как бы это сделать? Как добавить элемент в общее состояние формы React Hook, я вижу только варианты только для одного поля ввода, соответствующего свойству.

Вот как я бы сделал это, используя обычное состояние React

import { TrashIcon } from "@heroicons/react/24/outline";
import React, { useRef, useState } from "react";

const Test = () => {
  const [widthOptions, setWidthOptions] = useState<string[]>([]);
  const inputRef = useRef<HTMLInputElement>(null);
  const removeWidthOption = (widthOption: string) => {
    setWidthOptions(widthOptions.filter((option) => option !== widthOption));
  };

  const addWidthOption = (widthOption: string) => {
    setWidthOptions([...widthOptions, widthOption]);
  };

  const editWidthOptions = (widthOption: string, index: number) => {
    const newWidthOptions = [...widthOptions];
    newWidthOptions[index] = widthOption;
    setWidthOptions(newWidthOptions);
  };

  return (
    <div>
      <input type = "text" ref = {inputRef} />
      <button onClick = {() => addWidthOption(inputRef?.current?.value)}>
        Add Width Option
      </button>
      {widthOptions.map((option, index) => (
        <div className = "flex">
          <input
            type = "text"
            value = {option}
            onChange = {() => editWidthOptions(option, index)}
          />
          <button type = "button" onClick = {() => removeWidthOption(option)}>
            <TrashIcon className = "w-5 h-5 mb-3 text-gray-500" />
          </button>
        </div>
      ))}
    </div>
  );
};

export default Test;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
126
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете просто компонент контроллера для этого, как и для всех других полей. Поскольку вы не поделились ни одним из своих кодов, это общий множественный выбор

<Controller
  name = {name}
  render = {({ field: { value, onChange, ref } }) => {
    return (
    // You can use whatever component you want here, the you get the value from the form and use onChange to update the value as you would with a regular state
      <Test
        widthOptions = {value}
        setWidthOptions = {onChange}
      />
    );
  }}
/>;

https://react-hook-form.com/api/usecontroller/controller/

И в вашем тестовом компоненте удалите состояние и вместо этого получите реквизит

const Test = ({widthOptions, setWidthOptions}) => {
const inputRef = useRef<HTMLInputElement>(null);
.
.
.

Хорошо, а что нужно сделать в onChange? Как мне обратиться к состоянию поля/формы?

Bowis 23.11.2022 17:09

Форма React hook удерживает состояние, name действует как ключ. onChange просто возьмите любое значение и установите его как новое значение name. Это в основном то же самое, что и в приведенном выше примере onChange = {(newArray: string[])=>onChange(newArray)} Если вам нужна дополнительная помощь, вам придется обновить свой вопрос кодом, с которым вам нужна помощь.

Disco 23.11.2022 17:13

Я добавил пример того, что хочу, используя обычное состояние React.

Bowis 23.11.2022 20:29

@Bowis отличная работа над компонентом, я обновил свой ответ. Как видите, вы можете просто заменить состояние реквизитами.

Disco 24.11.2022 10:40

Другие вопросы по теме