失去对钩子函数状态变化的输入焦点 [英] Lost input focus on hooks function state change

问题描述

当我在父函数中定义钩子状态时，我在第一次按键时失去了输入字段的焦点.我需要根函数中的状态定义.

import React, { useState } from 'react'功能测试1(道具){const [test, setTest] = useState({value1: "", value2:""});const 测试 = () =>{const handleChange= (e) =>{const _test = {...test, [e.target.name]: e.target.value}设置测试(_测试)}返回 (<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>

)}返回 (<测试/>);}导出默认Test1；

但是如果我将状态定义移到子函数中，它就可以工作了.

<代码>导入 React, { useState } from 'react'功能测试1(道具){const 测试 = () =>{const [test, setTest] = useState({value1: "", value2:""});const handleChange= (e) =>{const _test = {...test, [e.target.name]: e.target.value}设置测试(_测试)}返回 (<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>

)}返回 (<测试/>);}导出默认Test1；

所以！为什么会发生这种情况，我该如何克服?

解决方案

我经常看到这种模式，人们将组件嵌套在组件中的方法中.这可能是一种意见，但我觉得这可能不是一个很好的模式.

我会抽象一个组件函数并将道具传递给第二个.像这样

const Test = ({test, setTest}) =>{const handleChange= (e) =>{const _test = {...test, [e.target.name]: e.target.value}设置测试(_测试)}返回 (<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>

)}功能测试1(道具){const [test, setTest] = useState({value1: "", value2:""});返回 (<Test test={test} setTest={setTest}/>);}导出默认Test1；

When i define the hooks state in the parent function i lost input field focus on first key press. I need the state definition in the root function.

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;

But if I move the state definition in to the child function it works.

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;

So! Why is this happening and how can I get over it?

解决方案

I have been seeing this pattern a lot where people nest components in methods in components. It may be an opinion, but I feel like this may not be a great pattern.

I would abstract the one component function and pass the props down to the 2nd. something like this

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;

这篇关于失去对钩子函数状态变化的输入焦点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！