Как переопределить автозаполнение / автозаполнение в материале-автозаполнение пользовательского интерфейса — React JS

#reactjs #material-ui #react-material

Вопрос:

Я использую материал-автозаполнение пользовательского интерфейса ( https://mui.com/components/autocomplete/#free-solo ).

Все работает нормально, демонстрация здесь: https://codesandbox.io/s/0v9v9?file=/demo.tsx

по умолчанию для ввода текста отображается autoComplete=’off’, но я хочу изменить его на autoComplete=’new-something’, но он не работает, а autoComplete= ‘new-something’ отображается как родительский атрибут разработчика вместо ввода

Я использовал этот код

 <TextField
  {...params}
  inputProps={{
    ...params.inputProps,
    autoComplete: 'new-something',
  }}
/>
 

Но это не работает. При вводе по-прежнему отображается autocomplete=»off» в качестве входного атрибута.

Ответ №1:

Как вы можете видеть в документе https://mui.com/api/text-field/#props есть два реквизита с одинаковым названием

  • inputProps: Attributes applied to the input element.
  • InputProps: реквизит, применяемый к элементу ввода.

Для атрибута автозаполнения вам нужны входные строки

    <TextField
      {...params}
      label="Search input"
      InputProps={
        ...params.InputProps,
        type: 'search',
      }}
      inputProps={{
        autocomplete: 'something'
      }}
    />
 

Вот рабочий пример в codesanbox https://codesandbox.io/s/freesolo-material-demo-forked-8g2n1?file=/demo.tsx

Комментарии:

1. Они сделали это в своем вопросе.

2. Спасибо. MUI с использованием InputProps (прописная I установка нижнего регистра) в коде автозаполнения. Входные данные должны быть inputProps.