我无法自动聚焦此组件中呈现的输入标记.我错过了什么?

class TaskBox extends Component {
  constructor() {
    super();
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.textInput.focus();
  }

  componentWillUpdate(){
    this.focus();
  }

  render() {
    let props = this.props;
    return (
      <div style={{display: props.visible ? 'block' : 'none'}}>
        <input
        ref={(input) => { this.textInput = input; }}
        onBlur={props.blurFN} />
        <div>
          <div>Imp.</div>
          <div>Urg.</div>
          <div>Role</div>
        </div>
        <div>
          <button>Add goal</button>
        </div>
      </div>
    )
  }
}

感谢您的帮助.

推荐答案

有一个属性可用于自动聚焦autoFocus,我们可以使用它来自动聚焦输入元素,而不是使用ref.

autoFocus与输入元素一起使用:

<input autoFocus />

我们也可以使用ref,但使用ref时,我们需要在正确的位置调用focus method,在componentWillUpdate lifecycle method中,该方法在初始渲染期间不会触发,而不是使用componentDidMount lifecycle method:

componentDidMount(){
    this.focus();
}

100:始终在render方法之前调用,并允许定义是否需要或可以跳过重新渲染.显然,在初始渲染时从未调用此方法.只有当组件中发生某些状态更改时,才会调用它.

shouldComponentUpdate返回真值后立即调用100.

100:一旦执行了render方法,就会调用componentDidMount函数.可以通过这种方法访问DOM,从而可以定义DOM操作或数据获取操作.任何DOM交互都应该在这种情况下发生.

参考:https://facebook.github.io/react/docs/react-component.html

Reactjs相关问答推荐

重新加载页面时始终出现汉堡菜单

如何使用React Router创建响应式主详细信息应用程序?

如何防止使用useCallback和memo重新渲染

Next.js-图像组件加载问题

获取点击的国家/地区名称react 映射

无法将react 路由状态从路由传递给子组件

在Reaction中的第一次装载时,Use Effect返回空数组

Mantine DatePickerInput呈现错误

使用VITE的Reaction应用程序的配置是否正确?

如何使用TouchStart/TouchEnd在Table ReactJS中交换位置?

如何隐藏移动导航栏后面的向下滚动图标和文本?

如何解决使用react-hook-form和yup动态创建的输入不集中的问题

如何将 DocuSign 控制台界面嵌入到 React 应用中

ReactJS中使用setState方法时,Context内部的State未进行更新

React - 将一个充满空值的无限大小的数组存储在 ref 中是否可以,或者我应该重置数组吗?

如何在 Next Js 13 App Router 中添加 Favicon 图标?

如何使用样式化函数为 TextField 的输入组件设置样式

如何从 React Redux store 中删除特定项目?

如何检索包含动态段的未解析路径?

自动重新获取不起作用 - RTK 查询