失去对 hooks 函数状态变化的输入关注
Lost input focus on hooks function state change
当我在父函数中定义挂钩状态时,我在第一次按键时失去了输入字段焦点。我需要根函数中的状态定义。
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;
所以!为什么会发生这种情况,我该如何克服它?
我经常看到这种模式,人们将组件嵌套在组件的方法中。这可能是一个意见,但我觉得这可能不是一个很好的模式。
我会抽象一个组件函数并将道具传递给第二个组件。像这样
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;
当我在父函数中定义挂钩状态时,我在第一次按键时失去了输入字段焦点。我需要根函数中的状态定义。
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;
所以!为什么会发生这种情况,我该如何克服它?
我经常看到这种模式,人们将组件嵌套在组件的方法中。这可能是一个意见,但我觉得这可能不是一个很好的模式。
我会抽象一个组件函数并将道具传递给第二个组件。像这样
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;