Блог

Я использую поле ввода чипа для ввода электронных писем. Я хочу отключить функцию удаления для определенных значений. Допустим, я заполняю поле ввода удаленными данными, а также предоставляю функциональность для добавления новых чипов, но я хочу отключить опцию удаления для извлекаемых значений(предыдущих значений). Я просмотрел документацию, но не нашел никакого решения.

Вы можете это сделать

   <Chip label="Disabled" disabled={true} />

 

Я понял это, я использовал «ввод чипа material ui», у него есть функция chipRenderer. Это функция обратного вызова, которая будет отображать чип в соответствии с предоставленными значениями.

Пример кода:

  chipRenderer={({value}, key) => (
            <Chip
              key={key}
              label={value}
              deleteIcon={
              <CancelIcon/>}
              onDelete={adminEmails.length > 0 amp;amp; adminEmails.includes(value) ? undefined : () => {
                  let oldValues = [...formik.values.super_admin_email];
                  let index = key
                  if (index > -1) {
                    oldValues.splice(index, 1);
                    formik.setFieldValue("super_admin_email", oldValues);
                  }
                }
              }
            >
            </Chip>
              )}
 

Внутри chipRenderer сначала я проверил, является ли данное электронное письмо старым или недавно введенным. Если это старое электронное письмо, то я удалил кнопку «Удалить» с чипа, а если это новое электронное письмо, то отображается кнопка «Удалить».

ссылка на codesandbox