Я показываю, как вы можете создать компонент ввода/текстового поля пользовательского интерфейса материала в Reactjs с отзывчивостью и наиболее возможными реквизитами (напишите один раз, используйте везде)
Вы можете найти ДЕМО здесь;
https://stackblitz.com/edit/react-materialui-text-field-with-possible-props
Я предполагаю, что вы создали новое приложение React. После этого установите materialUI или просто скопируйте приведенную ниже команду с помощью npm или yarn и запустите.
// with npm
npm install @material-ui/core
// with yarn
yarn add @material-ui/core
https://material-ui.com/getting-started/installation/После завершения этой установки вам нужно создать новый файл с выбранным вами именем. Я предпочитаю MyInputField.js Теперь давайте начнем пошагово.
- импортировать TextField из ‘@material-ui/core/TextField’;
2. Создайте функцию с тем же именем MyInputField или, может быть, другим, как вы хотите, и давайте добавим реквизиты, которые я добавил.
3. Давайте добавим эти реквизиты там, где нам нужны некоторые из них со значениями по умолчанию, а некоторые мы передадим.
4. экспортировать этот компонент, чтобы мы могли импортировать любой компонент, который нам нужен, и столько раз, сколько необходимо.
экспорт по умолчанию MyInputField;
5. Теперь нам нужно его импортировать и передать те реквизиты, которые нам нужны
импортировать MyInputField из «где он находится»
Надеюсь, вам понравилось :)
Вы можете найти ДЕМО здесь;
https://stackblitz.com/edit/react-materialui-text-field-with-possible-props
