Потеря фокуса ввода при изменении состояния функции хуков - PullRequest
Новая
       29

Потеря фокуса ввода при изменении состояния функции хуков

0 голосов
/ 12 апреля 2019

Когда я определяю состояние хуков в родительской функции, я теряю фокус поля ввода при первом нажатии клавиши. Мне нужно определение состояния в корневой функции. 

import React, { useState } from 'react'

function Test1(props) {
    const [test, setTest] = useState({value1: "", value2:""});

    const Test = () => {

        const handleChange= (e) => {
            const _test = {...test, [e.target.name]: e.target.value}
            setTest(_test)
        }

        return (
            <div style={{ margin: "200px" }}>
                <input name="value1" value={test["value1"]} onChange={handleChange}></input>
                <input name="value2" value={test["value2"]} onChange={handleChange}></input>
                <button onClick={() => console.log(test)}>Console.Log</button>
            </div>
        )
    }


    return (
        <Test />
    );

}


export default Test1;

Но если я перенесу определение состояния в дочернюю функцию, оно сработает. 


import React, { useState } from 'react'

function Test1(props) {

    const Test = () => {
        const [test, setTest] = useState({value1: "", value2:""});

        const handleChange= (e) => {
            const _test = {...test, [e.target.name]: e.target.value}
            setTest(_test)
        }

        return (
            <div style={{ margin: "200px" }}>
                <input name="value1" value={test["value1"]} onChange={handleChange}></input>
                <input name="value2" value={test["value2"]} onChange={handleChange}></input>
                <button onClick={() => console.log(test)}>Console.Log</button>
            </div>
        )
    }


    return (
        <Test />
    );

}


export default Test1;

Так! Почему это происходит и как я могу преодолеть это?

1 Ответ

1 голос
/ 12 апреля 2019

Я часто видел этот паттерн, когда люди вкладывают компоненты в методы в компонентах. Это может быть мнение, но я чувствую, что это не может быть хорошим примером.

Я бы абстрагировал однокомпонентную функцию и передал бы реквизиты второму. как то так 

const Test = ({test, setTest}) => {

  const handleChange= (e) => {
      const _test = {...test, [e.target.name]: e.target.value}
      setTest(_test)
  }

  return (
      <div style={{ margin: "200px" }}>
          <input name="value1" value={test["value1"]} onChange={handleChange}></input>
          <input name="value2" value={test["value2"]} onChange={handleChange}></input>
          <button onClick={() => console.log(test)}>Console.Log</button>
      </div>
  )
}

function Test1(props) {
    const [test, setTest] = useState({value1: "", value2:""});


    return (
        <Test test={test} setTest={setTest} />
    );

}


export default Test1;
...