由网友(凉汐)分享简介：我正在使用MUI库创建我的React Js应用。在这里，我使用controlled Text Field组件创建一个简单的搜索用户界面。但有件事很奇怪。Text Field组件在其值更改后失去焦点。这是我第一次面对这个问题。我以前从未遇到过这个问题。这怎么会发生呢？解决方案是什么？这里是代码和操场：https...

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

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

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

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

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

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

推荐答案

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

两种解决方案：

不要将其设置为单独的组件。而不是：

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>
  );
};

在其父组件之外定义组件：

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>
  );
};