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

Question

我有来自@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来自父组件。

关于如何在这种情况下设置焦点的任何想法？有什么地方可以挂机呼叫焦点吗？

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

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

useEffect(() =>
{
    debugger;

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

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

Answer 1

调试了一段时间后终于可以用了...

我使用了一段从Run side Effect when a propchanges w/Hooks 中获取的代码片段，并添加了一条debugger语句以便能够检查input元素：

let input = null

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

    if (input)
    {      
        debugger;

        input.focus()
    }

}, [props.user])

请注意props.user作为参数传递的...这意味着任何时候props.user发生变化，useEffect钩子都会触发。

设置为ref开时<TextField>：

ref={(i) => { input = i }}

正如在处理 React JS 焦点时的许多地方所示，它试图将焦点集中在Material-UITextField的<div>父元素上。真正的输入在 this 里面<div>。

所以正确的设置TextField是inputRef：

inputRef={(i) => { input = i }}

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