显示后焦点（）未在输入字段上设置（使用参考）

Posted 2023-04-14

【中文标题】显示后焦点（）未在输入字段上设置（使用参考）

【英文标题】：focus() doesn't set on input field after displaing (use refs)

【发布时间】：2021-10-27 03:26:30

【问题描述】：

愚蠢的 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

谢谢！

【问题讨论】：

你想在这里实现什么？ d-none 是一个引导类，你既不能导入也不能正确输入。

style.css 的类/样式为“.dnone”。这不是一个问题。问题：this.input.current.focus();不工作

点击click按钮后不起作用？

是的。按钮和函数 click() 上有点击处理程序，其中输入类切换的状态正在改变，然后尝试通过 this.input.current.focus(); 关注它；

【参考方案1】：

问题是 React 状态更新是异步处理的，因此在单击处理程序中，当您将状态更新排入队列时，您会立即尝试关注输入，但由于 active 状态尚未更新，您可以t，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
  );