我正在使用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 = () => ; // you get the idea
return (
);
};
做:
const MyComponent = () => {
return (
; // you get the idea
);
};
在其父组件之外定义组件:
const MyInput = ({value, onChange}) => (
);
const MyComponent = () => {
const [value, setValue] = useState('');
return (
setValue(event.target.value)}
/>
);
};
这篇关于MUI自定义文本字段失去对状态更改的关注的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持吉威生活!
[英文标题]MUI Custom Text Field loses focus on state change
声明:本媒体部分图片、文章来源于网络,版权归原作者所有,如有侵权,请联系QQ:330946442删除。