Блог

Главная - Вопросы по программированию - Как можно использовать массив микросхем Material UI как угловой ввод микросхем?

Как можно использовать массив микросхем Material UI как угловой ввод микросхем?

#reactjs #typescript #angular-material #material-ui #material-design

#reactjs #машинопись #angular-material #материал-пользовательский интерфейс #материал-дизайн

Вопрос:

Можно ли эмулировать ввод в стиле ввода Angular Material Chip, используя массив микросхем пользовательского интерфейса React Material?

Я пытаюсь включить чистый вид ввода микросхем Angular Material в React. Массив микросхем Material UI кажется самым близким, но, похоже, он не поддерживает ввод изначально. Существует ли конфигурация, которую можно использовать для получения такой же функциональности?

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

1. Я думаю, что автозаполнение может быть тем, на что вы хотите обратить внимание.

Ответ №1:

Основываясь на комментарии @ryan-cogswell, использование Autocomplete с freeSolo настройкой дало результат, аналогичный вводу чипа Angular Material.

 import React from "react";
import { Chip, TextField } from "@material-ui/core";
import { Autocomplete } from "@material-ui/lab";

import "./App.css";

export const App: React.FC = () => {
  return (
    <div className="App">
      <Autocomplete
        multiple
        id="tags-filled"
        options={[]}
        freeSolo
        renderTags={(value: string[], getTagProps) =>
          value.map((option: string, index: number) => (
            <Chip
              variant="outlined"
              label={option}
              {...getTagProps({ index })}
            />
          ))
        }
        renderInput={(params) => (
          <TextField
            {...params}
            variant="filled"
            label="freeSolo"
            placeholder="Favorites"
          />
        )}
      />
    </div>
  );
};

Ответ №2:

Существует также пакет для Material UI v5 (или MUI), называемый Mui chips input, и он работает с React 17 и 18!

Простой способ использования.

Проверьте документ здесь: https://viclafouch.github.io/mui-chips-input /

 import React from 'react'
import { MuiChipsInput } from 'mui-chips-input'

const MyComponent = () => {
  const [value, setValue] = React.useState([])

  const handleChange = (newValue) => {
    setValue(newValue)
  }

  return <MuiChipsInput label="Chips" fullWidth value={value} onChange={handleChange} />
}