Question

我有一个输入字段，如下所示：

 <input
     type="text"
     id="someid"
     autoFocus={true}
     ref={this.inputRef}
/>

我正在像这样对构造函数设置createRef：

constructor(props) {
   this.inputRef = React.createRef();
}

然后在componentDidMount（）上，将自动对焦设置为true：

componentDidMount() {
  this.inputRef.current.autoFocus = true;
}

在Chrome中，输入字段始终自动对焦，这是我期望的行为。在Firefox中，它专注于安装，但是在输入字段之外单击时会失去焦点。

即使在输入字段之外单击，如何保持对Firefox的关注？

Answer 1

您好，您可以在下面查看网址。我为您创建了一些示例

https://stackblitz.com/edit/react-hubbxi

class App extends Component {
  constructor() {
    super();
    this.inputRef = React.createRef();

  } 
  componentDidMount() {
    this.focusInput()

  }
  focusInput = ()=>{
    this.inputRef.current.focus();
  }
  render() {
    return (
      <div>

         <input
     type="text"
     id="someid"
     autoFocus={true}
     onBlur={this.focusInput}
     ref={this.inputRef}
/>
      </div>
    );
  }
}

如何在React的Firefox中专注于输入字段

1 个答案: