Question

我创建了一个表单，并附加了状态，但是在输入每个字符后，表单就会失去焦点。我意识到这是因为状态导致表单重新呈现了，我该如何转义？

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

Answer 1

当您将Finder渲染为一个组件时，它将在每个渲染器上创建一个新函数，而不是当您在组件内部对其进行渲染时，像下面的function一样调用它

尝试将return语句更改为

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

请通过this沙箱进行参考

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

1 个答案: