Я знаю, что это в основном мнение , но ИМО, вы не должны смешивать jQuery с реакцией, они используют довольно ортогональные способы sh манипуляции с пользовательским интерфейсом.
Здесь это способ, которым я выполнил этот дизайн
const createInitialState = initialValues =>
initialValues.map(value => ({ id: uuidv4(), value })); // id used internally
const createOnChangeValues = values => values.map(({ value }) => value);
const InputList = ({ defaultValues = [], onChange }) => {
const renderRef = useRef(null);
const inputRef = useRef(null);
const [values, setValues] = useState(createInitialState(defaultValues));
const [inputFocused, setInputFocused] = useState(false);
const [inputValue, setInputValue] = useState("");
useEffect(() => {
if (renderRef.current) {
onChange && onChange(createOnChangeValues(values));
}
renderRef.current = true;
}, [onChange, values]);
const addValue = value => {
if (value) {
setValues(values => [...values, { id: uuidv4(), value }]);
setInputValue("");
}
};
const updateValue = index => e => {
const updateValue = e.target.value;
if (updateValue) {
setValues(values =>
values.map(({ id, value }, i) => ({
id,
value: index === i ? updateValue : value
}))
);
} else {
setValues(values => values.filter((_, i) => i !== index));
}
};
useEffect(() => {
if (!inputFocused && inputValue) {
addValue(inputValue);
inputRef.current.focus();
}
}, [inputFocused, inputValue]);
const submitHandler = e => {
e.preventDefault();
addValue(inputValue);
};
const resetHandler = e => {
e.preventDefault();
setInputValue("");
};
return (
<Fragment>
<form id="inputForm" onReset={resetHandler} onSubmit={submitHandler} />
{values.map(({ id, value }, i) => (
<div key={id}>
<input value={value} onChange={updateValue(i)} />
</div>
))}
<div>
<input
form="inputForm"
ref={inputRef}
type="text"
value={inputValue}
onFocus={() => setInputFocused(true)}
onBlur={() => setInputFocused(false)}
onChange={e => setInputValue(e.target.value)}
/>
</div>
{inputValue && (
<div>
<input />
</div>
)}
</Fragment>
);
};
Суть в том, что у вас есть некоторый массив входных данных, используемых в настоящее время, и вы всегда визуализируете дополнительный пустой ввод. Как только пользователь начинает заполнять новый пустой ввод, он становится частью массива ввода после потери фокуса. Если какой-либо ввод становится пустым, он удаляется из массива. Большая часть logi c предназначена для управления свопом с нового / пустого входа на один в массиве и сохранения фокуса.
Использование
<InputList defaultValues={[... input values from state]} onChange={... values from inputs in array} />
