React - запретить ввод / текстовое поле фокусироваться на рендере

Question

У меня проблема с React, когда входные данные автоматически рисуют фокус.

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

Одно решение, которое для меня невозможно, - это скрытие второго ввода с помощью CSS, потому что я пытаюсь в конечном итоге сделать эту настройку рендеринга ввода c за пределы жестко запрограммированные два поля ввода (например, при вводе во втором поле ввода визуализируйте третье, при вводе в третьем поле ввода визуализируйте четвертое и т. д. и т. д.).

Есть ли CSS свойство или что-то, что я могу сделать в React, чтобы входные данные не отображали фокус автоматически? Спасибо!

Answer 1

Вместо этого вы можете неявно сфокусироваться на первом поле, убедившись, что фокус установлен на правом поле.

В реакции: создать ссылку и вызвать на ней фокус:

import React, {useRef, useEffect} from "react"

function Form(){

    const myform = useRef();
    
    useEffect(function(){
      myform.current.children[0].focus();
    })
    
    return <form ref={myform}><input /></form>;

}