时间戳

首页 > 解决方案 > 输入单个字符后表单失去焦点？

reactjs - 输入单个字符后表单失去焦点？

问题描述

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

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```

标签： reactjsuse-state

解决方案

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

尝试将 return 语句更改为

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

请通过此沙箱以供参考

推荐阅读