本文介绍了MUI自定义文本字段失去对状态更改的关注的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用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> ); };
这篇关于MUI自定义文本字段失去对状态更改的关注的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！