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

Question

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

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

我的代码:

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
  });
}