MUI自定义文本字段失去对状态更改的关注

MUI Custom Text Field loses focus on state change(MUI自定义文本字段失去对状态更改的关注)

本文介绍了MUI自定义文本字段失去对状态更改的关注的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用MUI库创建我的React Js应用。

在这里,我使用controlled Text Field组件创建一个简单的搜索用户界面。

但有件事很奇怪。Text Field组件在其值更改后失去焦点。 这是我第一次面对这个问题。我以前从未遇到过这个问题。

这怎么会发生呢?解决方案是什么?

这里是代码和操场:https://codesandbox.io/s/mui-autocomplete-lost-focus-oenoo?

注意:如果从代码中删除breakpoint typeText Field组件在其值更改后仍会失去焦点。

推荐答案

这是因为您在另一个组件中定义了一个组件,因此每次呈现该组件时都会重新创建该组件定义(并且每次用户在输入中键入内容时,您的组件都会呈现)。

两种解决方案:

  1. 不要将其设置为单独的组件。而不是:

    const MyComponent = () => {
      const MyInput = () => <div><input /></div>; // you get the idea
    
      return (
        <div>
          <MyInput />
        </div>
      );
    };
    

    做:

    const MyComponent = () => {    
      return (
        <div>
          <div><input /></div>; // you get the idea
        </div>
      );
    };
    
  2. 在其父组件之外定义组件:

    const MyInput = ({value, onChange}) => (
      <div>
        <input value={value} onChange={onChange} />
      </div>
    );
    
    const MyComponent = () => {
      const [value, setValue] = useState('');
    
      return (
        <div>
          <MyInput
            value={value}
            onChange={event => setValue(event.target.value)}
          />
        </div>
      );
    };
    

这篇关于MUI自定义文本字段失去对状态更改的关注的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:MUI自定义文本字段失去对状态更改的关注

基础教程推荐