Material ui 如何设置materialUI文本字段的焦点？

如何设置

材质ui文本字段

组件的焦点

componentDidMount() {
    ReactDom.findDomNode(this.refs.myControl).focus()
}

---

我已经尝试过上面的代码，但它不起作用：（

您可以使用

自动对焦

属性

<TextField value="some value" autoFocus />

---

自动对焦

对我也不起作用，可能是因为这是一个在顶级组件加载时没有安装的组件。我必须做一些更复杂的事情才能让它工作：

function AutoFocusTextField(props) {
  const inputRef = React.useRef();

  React.useEffect(() => {
    const timeout = setTimeout(() => {
      inputRef.current.focus();
    }, 100);

    return () => {
      clearTimeout(timeout);
    };
  }, []);

  return <TextField inputRef={inputRef} {...props} />;
}

函数AutoFocusTextField（props）{
const inputRef=React.useRef（）；
React.useffect（（）=>{
常量超时=设置超时（（）=>{
inputRef.current.focus（）；
}, 100);
return（）=>{
clearTimeout（超时）；
};
}, []);
返回；
}

---

请注意，由于某些原因，如果没有设置超时，它将无法工作。有关更多信息，请参阅。

对于React 16.8.6，您应该使用TextField的

inputRef

属性来设置焦点。我尝试了

ref

属性，但它无法工作

<TextField
  inputRef={input => input && input.focus()}
/>

input&&input.focus（）}
/>

说：

inputRef

：使用此属性将ref回调传递给本机输入组件

AlienKevin是正确的（将ref回调传递给“TextField.inputProps”），但您也可以在“this”对象上保存元素引用，以便以后设置焦点。下面是Coffeescript中的一个示例：

TextField
    inputProps:
        ref: (el)=>
            if el?
                @input_element = el

Button
    onClick:=> 
        @input_element.focus()

---

对于材质ui文本字段，需要在inputProps对象中输入自动对焦的道具，如下所示

 <TextField inputProps={{ autoFocus: true }} />

---

如果您使用的是material ui TextField和react功能组件，您可以在TextField组件中传递inputRef。这里的技巧是If条件

If（input！=null）

{
如果（输入！=null）{
input.focus（）；
}
}}
/>

---

这是一个工作示例。

这段代码实际上很好，但有一个缺点，在每次渲染时都会创建一个新函数。使用useCallback可以很容易地解决这个问题

<TextField
  inputRef={input => input && input.focus()}
/>

input&&input.focus（）}
/>

应该是

const callbackRef = useCallback((inputElement) => {
     if (inputElement) {
         inputElement.focus();
     }
 }, []);
...
<TextField
  inputRef={callbackRef}
/>

constcallbackref=useCallback（（inputElement）=>{
if（输入元素）{
inputElement.focus（）；
}
}, []);
...

它在页面加载时起作用，但在表单提交后不起作用。@StefanBalan是的，这只在页面加载时起作用。提交表单不会重新加载页面。在这种情况下，您可以通过编程方式设置自动对焦。这对我不起作用。我添加了属性，并且没有任何更改。文本字段不关注页面加载。只有我吗？您应该检查输入是否在超时回调中可用。此代码可能会抛出。更好的做法是将

setTimeout

返回的id保存到组件，并在

componentWillUnmount上检查超时是否仍然存在，如果仍然存在，则将其清除。您可以使用此.setState（{}，（）=>{input.focus（））与React 16.8.6中的SetTimeOut不同，您应该使用TextField的
inputRef
属性来设置焦点。看看代码的作者如何不立即意识到这是一个令人憎恶的黑客行为？键入
setTi…
时应该已经很清楚了。就在那里。不要复制这个，看看AlienKevin的答案。添加了相关的答案。这是正确的解决方案。请记住，这是其他几个重要组成部分的组合，包括、、等。这是正确答案的缩写，请添加一些最简单的工作示例。这很好，但由于某些原因，
input
有时会出现
null
，并且必须进行检查。为什么会出现这种情况
null
？这可以工作，但测试会给出错误提示-超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate内重复调用setState时，可能会发生这种情况。React限制嵌套更新的数量，以防止无限循环
const callbackRef = useCallback((inputElement) => {
     if (inputElement) {
         inputElement.focus();
     }
 }, []);
...
<TextField
  inputRef={callbackRef}
/>