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 prop changes w/Hooks的代码段，并添加了public class Base { private int num; public Base(int n) { num = n; } } class Sub extends Base { // error: won't compile }语句以能够检查debugger元素：

input

请注意，将let input = null useEffect(() => { console.log('rendered!') if (input) { debugger; input.focus() } }, [props.user])作为参数传递...这意味着，只要props.user发生更改，useEffect钩子就会触发。

在props.user上设置 ref 时：

<TextField>

在处理React JS焦点时，很多地方都显示

，它试图将焦点集中在Material-UI中ref={(i) => { input = i }}的{{1}}父元素上。实际输入位于此TextField内。

因此在<div>中设置的正确道具是 <div> ：

TextField

与此相关的answer使我朝着正确的方向前进。

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

1 个答案: