Как установить фокус на TextField \ input, используя форму Formik, когда initialValues ​​передаются через \ bound to props.object?

Question

У меня есть форма Formik с этим TextField от @ material-ui / core:

<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

Работает после отладки в течение некоторого времени ...

Я использовал фрагмент кода, взятый из Побочный эффект запуска, когда реквизит изменяется с 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, он пытался сфокусироваться на родительском элементе TextField <div> из Material-UI. Реальный вход находится внутри этого <div>.

Таким образом, правильная опора для установки в TextField равна inputRef:

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

Это связано ответ привел меня в правильном направлении.