React - 防止输入/文本区域专注于渲染答案

【问题标题】：React -- prevent input/textarea from focus on renderReact - 防止输入/文本区域专注于渲染
【发布时间】：2020-07-15 03:11:23
【问题描述】：

我遇到了输入自动绘制焦点的 React 问题。

我有一个在安装组件时呈现的输入字段。我想在第一个输入字段下方呈现第二个输入字段，只有在我开始输入第一个输入字段之后。

我遇到的问题是第二个输入在渲染时绘制了光标焦点，这是我不想要的。

对我来说不可能的一个解决方案是用 CSS 隐藏第二个输入，因为我试图最终使这个输入呈现设置变得通用，而不仅仅是硬编码的两个输入字段（例如，在输入第二个输入字段时，呈现第三个，在输入第三个输入字段时呈现第四个，依此类推）。

是否有任何 CSS 属性或我可以在 React 中做些什么来防止输入自动绘制焦点？谢谢！

【问题讨论】：

标签： javascript reactjs

【解决方案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>;

}

【讨论】：