В форме, которую я создаю, материал, который создается в форме, должен иметь несколько вариантов ширины, которые можно добавить. Это означает, что у меня будет ввод текста, где пользователь может добавить опцию, и когда эта опция будет добавлена, она должна быть добавлена в массив 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;
Вы можете просто компонент контроллера для этого, как и для всех других полей. Поскольку вы не поделились ни одним из своих кодов, это общий множественный выбор
<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);
.
.
.
Форма React hook удерживает состояние, name
действует как ключ. onChange просто возьмите любое значение и установите его как новое значение name
. Это в основном то же самое, что и в приведенном выше примере onChange = {(newArray: string[])=>onChange(newArray)}
Если вам нужна дополнительная помощь, вам придется обновить свой вопрос кодом, с которым вам нужна помощь.
Я добавил пример того, что хочу, используя обычное состояние React.
@Bowis отличная работа над компонентом, я обновил свой ответ. Как видите, вы можете просто заменить состояние реквизитами.
Хорошо, а что нужно сделать в onChange? Как мне обратиться к состоянию поля/формы?