Пользовательский интерфейс материала - настройка текстового поля

Material UI - это библиотека материального дизайна, созданная для React.

Это набор компонентов React со стилями материального дизайна.

В этой статье мы рассмотрим, как добавить текстовые поля с помощью пользовательского интерфейса материала.

Размеры

Мы можем изменить размер текстового поля с помощью свойства size.

Например, мы можем написать:

import React from "react";
import TextField from "@material-ui/core/TextField";
export default function App() {
  return (
    <div className="App">
      <TextField label="Size" id="small" defaultValue="Small" size="small" />
    </div>
  );
}

добавить текстовое поле размером small.

Макет

Мы можем расположить наши текстовые поля по-своему.

Для этого мы можем написать:

import React from "react";
import TextField from "@material-ui/core/TextField";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap"
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: "25ch"
  }
}));
export default function App() {
  const classes = useStyles();
return (
    <>
      <div>
        <TextField
          id="filled-full-width"
          label="Label"
          style={{ margin: 8 }}
          placeholder="Placeholder"
          helperText="Full width!"
          fullWidth
          margin="normal"
          InputLabelProps={{
            shrink: true
          }}
          variant="filled"
        />
        <TextField
          label="None"
          id="filled-margin-none"
          defaultValue="foo"
          className={classes.textField}
          helperText="foo"
        />
        <TextField
          label="Dense"
          style={{ margin: 3 }}
          id="filled-margin-dense"
          defaultValue="bar"
          className={classes.textField}
          helperText="bar"
          margin="dense"
        />
      </div>
    </>
  );
}

для добавления текстовых полей.

У нас есть одно полноразмерное текстовое поле вверху и 2 более коротких внизу.

У них есть обычные реквизиты, у которых есть helperText для подсказки.

margin имеют запас.

У нас также есть несколько стилей для изменения полей.

className имеют имена классов.

placeholder есть заполнитель для текстовых полей.

variant можно заливать или нет.

margin может быть меньше значения по умолчанию с dense.

Неконтролируемый vs контролируемый

Текстовые поля могут быть неконтролируемыми, что означает, что они не имеют никакого состояния.

Или его можно контролировать, что означает, что к нему привязано состояние.

Чтобы создать контролируемое текстовое поле, мы можем добавить реквизиты value и onChange к TextField.

Например, мы можем написать:

import React from "react";
import TextField from "@material-ui/core/TextField";
export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <TextField
          id="standard-name"
          label="Name"
          value={name}
          onChange={handleChange}
        />
      </div>
    </>
  );
}

У нас есть состояние name, которое передается в свойство value.

И функция handleChange, переданная в свойство onChange.

Затем, когда мы что-то вводим, функция handleChange запускается и вызывает setName для обновления состояния name.

Компоненты

TextField состоит из более мелких компонентов.

Они включают FormControl, Input, FilledInput, InputLabel, OutlinedInput и FormHelperText.

Например, мы можем заменить TextField на:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="input">Name</InputLabel>
          <Input id="input" value={name} onChange={handleChange} />
        </FormControl>
      </div>
    </>
  );
}

У нас есть Input для поля ввода и InputLabel для метки для поля ввода.

Чтобы добавить текст подсказки, мы можем использовать компонент FormHelperText:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import Input from "@material-ui/core/Input";
import InputLabel from "@material-ui/core/InputLabel";
import FormHelperText from "@material-ui/core/FormHelperText";
export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="input">Name</InputLabel>
          <Input id="input" value={name} onChange={handleChange} />
          <FormHelperText>enter your name</FormHelperText>
        </FormControl>
      </div>
    </>
  );
}

Мы также можем использовать компоненты OutlinedInput и FilledInput для добавления полей ввода с этими вариантами:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import InputLabel from "@material-ui/core/InputLabel";
import FormHelperText from "@material-ui/core/FormHelperText";
export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="input">Name</InputLabel>
          <OutlinedInput
            id="input"
            value={name}
            onChange={handleChange}
            label="Name"
          />
          <FormHelperText>enter your name</FormHelperText>
        </FormControl>
      </div>
    </>
  );
}

, чтобы добавить в поле поле ввода с контуром.

И мы можем использовать FilledInput, чтобы добавить поле ввода с фоном:

import React from "react";
import FormControl from "@material-ui/core/FormControl";
import FilledInput from "@material-ui/core/FilledInput";
import InputLabel from "@material-ui/core/InputLabel";
import FormHelperText from "@material-ui/core/FormHelperText";
export default function App() {
  const [name, setName] = React.useState("james");
  const handleChange = event => {
    setName(event.target.value);
  };
  return (
    <>
      <div>
        <FormControl>
          <InputLabel htmlFor="input">Name</InputLabel>
          <FilledInput id="input" value={name} onChange={handleChange} />
          <FormHelperText>enter your name</FormHelperText>
        </FormControl>
      </div>
    </>
  );
}

Заключение

TextField состоит из множества компонентов формы.

Следовательно, мы можем добавить их вместо TextField.

Мы также можем сделать текстовое поле и ввод контроллера.