gpt4 book ai didi

reactjs - 当initialValues通过\绑定(bind)到props.object时,如何使用Formik表单将焦点设置在TextField\input上?

转载 作者:行者123 更新时间:2023-12-03 17:01:27 26 4
gpt4 key购买 nike

我有来自@material-ui/core 的带有这个 TextField 的 Formik 表单:

<TextField
autoFocus
fullWidth
name='name'
label='Name'
variant="outlined"
onChange={handleChange("name")}
helperText={errors.name ? errors.name : "What's your name?"
error={errors.name}
touched={touched.name}
value={values.name}
/>

这在表单第一次加载 initialValues 时效果很好。设置为空 user目的。 Name 输入将成为焦点。

但是,当使用现有用户对象加载表单时(在编辑操作期间),它会正确加载所有字段,但不再有焦点。

此表单位于无状态功能组件内, props.user来自父组件。

在这种情况下如何设置焦点有什么想法吗?有什么地方可以挂上通话焦点吗?

####### 编辑 1 #######

我尝试使用 useEffect 但它在输入字段实际更新为值之前被触发......
useEffect(() =>
{
debugger;

textInput.focus(); // at this point the input field hasn't gotten the value yet.
})

我的猜测是我需要持有 ref在父组件内部...

最佳答案

经过一段时间的调试,它可以工作了......

我使用了取自 Run side effect when a prop changes w/Hooks 的一段代码。并添加了 debugger能够检查 input 的声明元素:

let input = null

useEffect(() =>
{
console.log('rendered!')

if (input)
{
debugger;

input.focus()
}

}, [props.user])

注意 props.user作为参数传递...这意味着任何时候 props.user更改, useEffect 钩子(Hook)会开火。

设置时 ref <TextField> :
ref={(i) => { input = i }}

正如在处理 React JS 焦点时的许多地方所示,它试图将焦点集中在 TextField<div> Material-UI 的父元素。真正的输入在这个 <div>里面.

所以在 TextField 中设置正确的 Prop 是 inputRef :
inputRef={(i) => { input = i }}

这个相关 answer引导我走向正确的方向。

关于reactjs - 当initialValues通过\绑定(bind)到props.object时,如何使用Formik表单将焦点设置在TextField\input上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60021061/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com