MUI 自定义文本字段失去了对状态变化的关注

【问题标题】：MUI Custom Text Field loses focus on state changeMUI 自定义文本字段失去了对状态变化的关注
【发布时间】：2022-01-06 20:52:48
【问题描述】：

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

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

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

这怎么会发生？以及解决方案是什么。

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

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

【问题讨论】：

标签： javascript reactjs react-hooks material-ui use-state

【解决方案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>
  );
};

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

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

【讨论】：