当initialValues通过\绑定到props.object时，如何使用Formik表单将焦点设置在TextField\input上？

Posted 2023-03-13

【中文标题】当initialValues通过\\绑定到props.object时，如何使用Formik表单将焦点设置在TextField\\input上？

【英文标题】：How to set focus on a TextField\input using a Formik form when initialValues are passed through\bound to props.object?当initialValues通过\绑定到props.object时，如何使用Formik表单将焦点设置在TextField\input上？

【发布时间】：2020-05-18 03:16:59

【问题描述】：

我有来自 @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 对象时，这非常有用。名称输入将成为焦点。

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

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

在这种情况下如何设置焦点有什么想法吗？有什么地方可以挂机调用focus吗？

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

我尝试使用useEffect，但它在输入字段实际更新为值之前被触发...

useEffect(() =>

    debugger;

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

我的猜测是我需要在父组件中保存一个ref...

【参考方案1】：

调试一段时间后就可以使用了...

我使用了从 Run side effect when a prop changes w/Hooks 中提取的代码的 sn-p 并添加了 debugger 语句以便能够检查 input 元素：

let input = null

useEffect(() =>

    console.log('rendered!')

    if (input)
          
        debugger;

        input.focus()
    

, [props.user])

注意props.user 作为参数传递...这意味着只要props.user 更改，useEffect 挂钩就会触发。

在<TextField>上设置ref时：

ref=(i) =>  input = i 

正如在处理 React JS 焦点时的许多地方所示，它试图从 Material-UI 中关注 TextField 的 <div> 父元素。真正的输入在这个<div> 中。

所以在TextField 中设置的正确属性是inputRef：

inputRef=(i) =>  input = i 

这个相关的answer 引导我朝着正确的方向前进。

【讨论】：

你的props.user 不是会在它发生变化时运行useEffect 吗？我认为您不想在每次 onChange 之后都这样做。尝试将formikProps.initialValues.user 添加为依赖项，它会在更改initialValues 时运行。

是的...在每次更改之后，即一旦props.user 更改，我想专注于名称<TextField>。顺便说一句：InitialValues 已经分配给props.user。