focus() 显示后未在输入字段上设置（使用 refs）

Question

愚蠢的 React 问题：输入显示后如何设置焦点以及为什么我的代码不起作用？（没有显示切换它可以工作。）

编辑： 我期望的是：单击按钮后，输入字段出现（通过删除 .dnone class）并获得焦点。（但事实并非如此。）

我的代码：

import "./styles.css"; // with .dnone class with display:none
import React from 'react';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.input = React.createRef();
    this.state = {
      active: false
    }
  }

  click = (e) => {
    e.preventDefault();
    this.setState({
      active: true
    });
    this.input.current.focus();
  }

  render () {
    return (
      <div className="App">
        <input type="text" ref={this.input} className={(this.state.active ? "" : "dnone")} />
        <button type="button" onClick={(e) => this.click(e)}>click</button>
      </div>
    );
  }
}

现场演示：https://codesandbox.io/s/immutable-sea-9884z?file=/src/App.js:0-607

谢谢！

Answer 1

问题在于 React 状态更新是异步处理的，因此在点击处理程序中，当您将状态更新加入队列时，您会立即尝试关注输入，但由于 active 状态尚未更新但是你不能，dnone 类名还没有被删除并且输入可见。

将焦点逻辑移至 componentDidUpdate 生命周期方法以“响应”active 状态更新。

componentDidUpdate(prevProps, prevState) {
  if (prevState.active !== this.state.active && this.state.active) {
    this.input.current.focus();
  }
}

click = (e) => {
  e.preventDefault();
  this.setState({
    active: true
  });
}

focus() 显示后未在输入字段上设置（使用 refs）

focus() doesn't set on input field after displaing (use refs)

reactjs

react-ref