输入单个字符后表单失去焦点？答案

【问题标题】：Form looses focus after single character input?输入单个字符后表单失去焦点？
【发布时间】：2020-04-19 13:09:45
【问题描述】：

我创建了一个附有状态的表单，但在输入每个字符后，表单都会失去焦点。我意识到它是因为状态导致表单重新呈现我如何逃避这个？

import axios from 'axios'

const App = () => {
  const [countries,setCountries] =useState([])
  const [ newName,setnewName ] = useState('')

  useEffect(()=>{
    axios.get('https://restcountries.eu/rest/v2/all')
    .then(response=>{
      setCountries(response.data)
    })
  },[])

  const handleChange = (event) =>{
    setnewName(event.target.value)
  }
  const Finder = ()=>{

    return(
      <div>
        <form>
          <div>
            Find country : <input value={newName} onChange={handleChange} />
          </div>
        </form>
      </div>
    )
  }

  return(
    <div>
    <p>Meow</p>
    <Finder/>
    </div>
  )

}

export default App```

【问题讨论】：

标签： reactjs use-state

【解决方案1】：

当您将Finder 渲染为一个组件时，它将在每个渲染上创建一个新函数，而不是当您在组件内渲染它时将其作为function 调用，如下所示

尝试将return语句更改为

return(
  <div>
   <p>Meow</p>
   {Finder()}
  </div>
)

请通过this沙箱参考

【讨论】：