在 ReactJS 中使用 state 和 Function 组件时如何使输入不失去焦点？

Posted 2023-02-23

【中文标题】在 ReactJS 中使用 state 和 Function 组件时如何使输入不失去焦点？

【英文标题】：How to make the input not to lose focus when using state and Function components in ReactJS?

【发布时间】：2017-10-04 02:20:06

【问题描述】：

我使用 Function 组件来渲染组件。 但是只要设置了状态，输入控件就会失去焦点。

如何更改下面的代码以使输入不会失去焦点？我需要该组件是一个 Function 组件。

我的表单上有 10 个输入，因此取决于哪个文本框已更改，它应该在呈现后将焦点放在更改的文本框上。

在 changeHandler(event) 中，我知道包含引用已更改文本框的目标属性的事件，因此我需要在呈现状态后将焦点设置到目标输入元素。

也许我应该定义一个类级别的变量并将目标设置为那个。

import React, Component from 'react';

export default class PlaybackPassword extends Component   

constructor(props) 
        super(props);
          this.state = 
            setting: 
          
        this.focusElement = null;    
        this.changeHandler= this.changeHandler.bind(this); 
    

    componentDidUpdate()
    
      if (this.focusElement != null)
      this.focusElement.focus();
     

     changeHandler(event)
          
            this.focusElement = event.target;
            var setting = this.state.setting;
            setting.SelectedValue = event.target.value;  
            this.setState(setting : setting);
        
    render() 
            var parent = this;
            function Password(props)
            
                return (<div className="password">
                  <input type="password" 
                    value=props.selectedValue onChange=parent.changeHandler /> 
                </div>);
             
            return (
            <div className="playbackPassword">
                <Password selectedValue=this.state.setting.SelectedValue  /> 
            </div>         
            );
        

【问题讨论】：

您可以将autoFocus 属性传递给输入元素。如果输入在更新期间的任何时候失去焦点，您可以设置一个 ref 并在 componentDidUpdate 生命周期方法中手动关注它。

能否提供示例代码？

在分配onChange 处理程序后，只需将autoFocus 添加为属性即可。 ***.com/questions/28889826/…

React set focus on input after render的可能重复

如果你稍微清理一下代码，我认为你不会遇到自动对焦问题：密码组件应该移到渲染之外。

【参考方案1】：

在示例代码中，您在每次渲染时定义（即创建）一个新的function Password。这意味着您的 <Password> 组件每次都将是一个全新的组件。

关键是在 render 函数之外定义你的函数一次，以便 React 可以跟踪 <Password> 组件实际上是渲染之间的同一个组件。

示例：https://codesandbox.io/s/nn2nwq2lzp

注意：您将无法使用parent，但需要传递一个道具。