#javascript #reactjs #material-ui
#javascript #reactjs #материал-пользовательский интерфейс
Вопрос:
Свойство «selected» в MenuItem нем не работает Select . Пожалуйста, проверьте https://codesandbox.io/s/9j8z661lny
Я попытался сравнить, используя Id , также вы можете только писать selected={true} , и он не отметил слова, которые уже выбраны
Возможно, я неправильно использую компонент, однако я приму любую рекомендацию для получения желаемого поведения.
Заранее спасибо за ваше время. С наилучшими пожеланиями
Ответ №1:
Вам не нужно ничего делать с selected включенной MenuItem опорой — она устанавливается автоматически. Что вам действительно нужно, так это чтобы MenuItem значение соответствовало значению в Select массиве значений.
В настоящее время вы используете объекты в качестве своих значений. Material-UI поддерживает использование объектов, но проверка равенства будет работать только в том случае, если вы используете точно такие же объекты ( === должно быть true) для выбранных вами значений и ваших MenuItem values.
В вашем случае у вас есть два набора объектов — один для выбранных вами групп (передается как Select значение) и один для полного набора групп (используется для MenuItem значений). Хотя два набора объектов содержат совпадающую информацию, ни один из объектов из полного набора не будет равен ( === ) ни одному из объектов в выбранных группах.
Я рекомендую вам использовать только «id» для значений. Затем, чтобы создать Chip s для выбранных вами значений, вам просто нужно иметь возможность искать группу по ее идентификатору.
Вот рабочий пример, основанный на вашей изолированной среде:
Комментарии:
1. Привет, спасибо, что уделили мне время, чтобы ответить, я понял ваше объяснение. Но я получаю эту ошибку в моем проекте TypeError: не удается прочитать свойство ‘Id’ неопределенного, когда я пытался передать group.id . Как вы, возможно, знаете, общее количество групп и выбранные группы, которые я получаю из API. Я использую async / await. У вас есть какие-либо комментарии? Почему появляется эта ошибка?
2. Трудно сказать, не видя структуры вашего реального кода.
3. Я решил проблему. Я передал неправильный параметр функции reduce, идентификатор для меня прописной, и я неправильно использовал. Ваша помощь была потрясающей! Большое спасибо!