我正在使用MUI庫來創建我的React Js應用程式。
在這里，我使用受控文本欄位組件來創建一個簡單的搜索 UI。
但是有一點很奇怪。將Text Field它的值更改后組件失去焦點。
這是我第一次面對這個問題。我以前從未遇到過這個問題。
這怎么會發生？什么是解決方案。
這是代碼和操場：https : //codesandbox.io/s/mui-autocomplete-lost-focus-oenoo？
注意：如果我breakpoint type從代碼中洗掉，Text Field組件在更改其值后仍會失去焦點。
uj5u.com熱心網友回復：
這是因為您在另一個組件中定義了一個組件，因此每次組件呈現時都會重新創建組件定義（并且每次用戶輸入輸入時都會呈現您的組件）。
兩種解決方案：
不要讓它成為一個單獨的組件。代替：
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> ); };
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/370051.html
標籤：javascript 反应 反应钩子 材质-ui 使用状态