#javascript #reactjs #autocomplete #material-ui
Вопрос:
В недавнем проекте я использую автозаполнение пользовательского интерфейса Material. Там я не хочу, чтобы поле ввода было очищено, поэтому я использую clearOnBlur свойство со значением false .
Даже в этом случае Автозавершающее устройство очищает поле ввода после потери фокуса.
Буду признателен за помощь!
Вот пример:
https://codesandbox.io/s/blue-moon-2bk87?file=/src/ComboBox.js
Комментарии:
1. Код, который прилагается, успешно работает. В чем проблема?
2. Входные данные НЕ должны быть очищены.
3. @Julien, возможно, ты прав! Я попробовал некоторые из их примеров в их собственном CodeSandbox, и там эта
clearOnBlurфункция также не работает. Спасибо за подсказку!4. Я сделал эту песочницу, codesandbox.io/s/material-demo-forked-h8sol , из демо-версии игровой площадки, material-ui.com/components/autocomplete/#playground . Ввод не очищается при размытии. Извините, удалил мой комментарий выше.
5. Спасибо за песочницу! Я только что узнал, что недавно это было исправлено в этом PR github.com/mui-org/material-ui/pull/28190 .
Ответ №1:
Похоже, что в material-ui 5.0.0-beta том, в чем вы его используете, есть проблема. В 4.12.3 нем все работает нормально. Пожалуйста, ознакомьтесь с этим codesandbox :
const ComboBox = function () {
const [value, setValue] = useState("");
const Combo = useRef();
const onBlur = (e) => {
Combo.current.inputValue = value;
};
const filterOptions = (options, state) => {
return options;
};
return (
<Autocomplete
ref={Combo}
onChange={(e) => {
setValue(e.target.value);
}}
onSelect={(e) => {
setValue(e.target.value);
}}
filterOptions={filterOptions}
id="combo-box-demo"
options={top100Films}
getOptionLabel={(option) => option.title}
style={{ width: 300 }}
onBlur={onBlur}
clearOnBlur={false}
inputValue={value}
renderInput={(params) => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
/>
);
};
Я попытался установить входное значение вручную, но из-за material-ui версии это не работает.
Комментарии:
1. Спасибо! Это абсолютно правильно. В новейшей версии пользовательского интерфейса Material этот параметр не работает. К счастью, однако, для этой конкретной проблемы уже существует PR, и, надеюсь, он скоро появится. github.com/mui-org/material-ui/pull/28190