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

【问题标题】：How to make the input not to lose focus when using state and Function components in ReactJS?在 ReactJS 中使用 state 和 Function 组件时如何使输入不失去焦点？
【发布时间】：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 添加为属性即可。 stackoverflow.com/questions/28889826/…
React set focus on input after render的可能重复
如果你稍微清理一下代码，我认为你不会遇到自动对焦问题：密码组件应该移到渲染之外。

标签： javascript html reactjs components state

【解决方案1】：

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

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

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

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

【讨论】：