Форма теряет фокус после ввода одного символа?

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

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
person ilulale    schedule 19.04.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку вы визуализируете Finder как компонент, и вместо этого он будет создавать новую функцию для каждого отрисовки, поскольку вы визуализируете ее внутри компонента, вызывайте ее как function, как показано ниже

попробуйте изменить оператор возврата как

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

Просмотрите эту песочницу для справки.

person Sumanth Madishetty    schedule 19.04.2020