Я пытался заставить useRef работать, и я не могу понять, почему это не так.
У меня есть контролируемый компонент ввода и форма, которая оборачивает несколько из этих входов. после отправки ввод добавляется в виде строки в списке, и новая форма находится внизу всех отправленных строк.
после отправки в новой форме фокусируется последний ввод. Как я могу сделать это сосредоточиться на первом входе? Я пытался использовать useRef и useEffects для фокуса при каждом рендеринге, но это не сработало. Я даже не уверен, нужно ли мне использовать React.forwardRef, поскольку входной тег html обернут компонентом Input.
другая вещь (я не уверен, если это возможно): как я могу может заставить его фокусировать следующий вход после заполнения (я уже ввожу 1 символ на вход, но не уверен, как перейти к следующему входу при изменении). количество входных данных не является постоянным, и невозможно использовать хуки в al oop.
, вот компонент ввода:
function Input({ value, handleChange}) {
let props = {
value,
onChange: (e) => handleChange(e.target.value[e.target.value.length - 1]),
}
return <input {...props}/>
}
и то, что форма отображает:
<form onSubmit={(e) => sendForm(e)}>
{values.map((i, idx) => {
let props = {
key: idx,
value: values[idx],
handleChange: updateValue(idx),
}
return <Input {...props} />
}
)}
<input type="submit" value="Submit" />
</form>
Спасибо.
