要将焦点设置在 Material UITextField组件ref回调上，则ReactDOM.findDOMNode不是

你可以使用以下方法正确设置焦点refs：

1. 在您的组件中创建一个 ref。
2. 将 ref 附加到TextField。
3. 在生命周期方法中设置焦点componentDidMount。

以下是一个操作示例：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import TextField from '@material-ui/core/TextField';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.textFieldRef = React.createRef();
  }

  componentDidMount() {
    // Access the input element directly using the ref
    if (this.textFieldRef.current) {
      this.textFieldRef.current.focus();
    }
  }

  render() {
    return (
      <TextField
        label="My Control"
        inputRef={this.textFieldRef} // Attach the ref to the TextField
      />
    );
  }
}

export default MyComponent;

解释

1. 创建 Ref：在构造函数中，使用创建一个 ref React.createRef()。
2. 附加参考：TextField使用道具附加此参考inputRef。
3. 设置焦点：在中componentDidMount，检查 ref 是否可用并focus在其上调用方法。

通过使用inputRefMaterial UI 提供的 prop，您可以直接访问 的底层 DOM 元素并对其TextField进行调用focus()。此方法避免了 的陷阱findDOMNode并遵循了 React 处理 ref 的最佳实践。