当 initialValues 被传递 through\bound 到 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 来自父组件。

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

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

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

useEffect(() =>
{
    debugger;

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

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

Answer 1

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

我使用了取自 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 挂钩都会触发。

在 <TextField> 上设置 ref 时:

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

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

里面

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

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

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

Answer 2

表单初始化后将焦点设置到输入字段的一般答案：

const formik = useFormik({
 initialValues: {
        firstName: '',
        ...
    }, 
    ...
});
useEffect(() => {
  formik.setFieldValue('name', '', true);
}, [ varSet ]);

当 initialValues 被传递 through\bound 到 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?

forms

input-field

autofocus

reactjs

formik