Работа с компонентами сторонних библиотек в React

React является одним из самых популярных фреймворков JavaScript, используемых для разработки пользовательских интерфейсов. Его экосистема предлагает множество компонентов, которые можно использовать для создания функциональных компонентов. В этой статье мы рассмотрим, как работать с компонентами сторонних библиотек в React, особенно в функциональных компонентах. Мы будем использовать хорошо известную библиотеку Material-UI в качестве примера.

1. Установка и импорт библиотеки

Прежде всего, установите необходимую библиотеку с помощью npm или yarn. Например, для установки Material-UI, выполните команду:

npm install @material-ui/core

Затем импортируйте компоненты, которые вы хотите использовать, в своем функциональном компоненте:

import { Button, TextField } from '@material-ui/core';

2. Использование компонентов

Как только вы импортировали компоненты, вы можете использовать их внутри своего функционального компонента. Просто добавьте их в JSX-разметку, как если бы это был обычный HTML-элемент:

function MyComponent() {
  return (
    <div>
      <Button variant="contained" color="primary">
        Нажми меня!
      </Button>
      <TextField label="Введите текст" />
    </div>
  );
}

3. Передача свойств

Компоненты библиотеки могут иметь различные свойства (props), которые можно передать в них для настройки. Например, кнопка Material-UI имеет свойства variant и color, которые определяют ее стиль и цвет. Чтобы передать свойство компоненту, просто добавьте его в JSX-разметку:

<Button variant="outlined" color="secondary">
  Нажми меня!
</Button>

4. Обработка событий

Компоненты библиотеки могут также иметь свои собственные события, которые можно обрабатывать. Например, кнопка Material-UI имеет событие onClick, которое вызывается при клике на нее. Чтобы обработать событие, просто передайте функцию обработчика в свойство события:

function handleClick() {
  console.log('Кнопка была нажата!');
}

<Button onClick={handleClick}>
  Нажми меня!
</Button>

5. Другие возможности

Компоненты библиотеки могут предлагать еще множество других возможностей, таких как различные стилизации, анимации или дополнительные свойства и события. Рекомендуется изучить документацию библиотеки, чтобы узнать больше о доступных функциях и настройках. В заключение, работа с компонентами сторонних библиотек в React очень проста и удобна. Они позволяют значительно ускорить процесс разработки, предоставляя готовые и стилизованные компоненты, которые можно использовать в своих проектах. Не стесняйтесь экспериментировать с различными библиотеками и настраивать их компоненты в соответствии с вашими потребностями.

Формы

Формы позволяют нам принимать данные от пользователей и отправлять их на сервер для обработки. Это различные типы форм, такие как «Вход», «Регистрация» и т.д. В HTML5 есть элементы формы, такие как input, textarea, select, они поддерживают собственное внутреннее состояние в DOM, но в React мы поддерживаем состояние элементов формы внутри компонента, чтобы мы могли иметь полный контроль над элементами формы.

Что такое обработка форм

Обработка форм означает, как мы обрабатываем данные формы, когда пользователь изменяет значение или отправляет форму. Давайте посмотрим на пример того, как мы обрабатываем данные инпута с помощью хуков React.

import React,{useState} from 'react';

function Form() {
  const [name,setName] = useState('');

  function handleNameChange(e){
    setName(e.target.value)
  }

  function handleSubmit(e) {
    e.preventDefault() // останавливаем перезагрузку страницы по умолчанию
    console.log(name);
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="Name" value={name}
        onChange={handleNameChange}/>
      <button>Submit</button>
    </form>
  )
}

В приведенном выше коде мы установили для атрибута value элемента input свойство name, а метод обработчика событий onChange - handleNameChange - запускается каждый раз, когда мы вводим некоторые данные в элемент input, и он обновляет свойство name с помощью метода setName, так что мы продолжаем синхронизировать значение с состоянием react. handleSubmit используется для отправки формы.

Элемент select

<select> помогает нам создать выпадающий список. Давайте посмотрим на пример того, как создать выпадающий список и обрабатывать данные.

import React,{useState} from 'react';

function FormSelect() {
  // начальное значение состояния - строка 'react'
  const [framework, setFramework] = useState('react');

  function handleChange(e){
    setFramework(e.target.value);
  };

  function handleSubmit(e){
    e.preventDefault();
    console.log(framework);
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Choose your framework</h2>
      <select onChange={handleChange} value={framework}>
        <option value="react">React</option>
        <option value="angular">Angular</option>
        <option value="vue">Vue</option>
      </select>
      <button type="submit">Submit</button>
    </form>
  );
}

Здесь мы создали выпадающий список фреймворков в элементе <select> мы установили атрибут value для свойства framework и добавили обработчик событий onChange. Вложенные элементы <option> содержат атрибут value, который содержит данные, так что всякий раз, когда мы выбираем конкретный параметр, вызывается метод handleChange и изменяет значение свойства framework значением атрибута <option>. Вы видели, что элемент select также следует аналогичному шаблону, как и элемент input, так почему бы нам не создать пользовательский хук и повторно использовать его в каждом элементе формы?

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

import React, {useState} from 'react';

function useInput(initialValue) {
  const [value,setValue] = useState(initialValue);

  function handleChange(e) {
    setValue(e.target.value);
  }

  return [value,handleChange];
}

Здесь мы создали пользовательский хук под названием useInput, давайте его применим.

Использование пользовательского хука useInput()

function LoginForm(){

  const [email, setEmail] = useInput('');
  const [password, setPassword] = useInput('');

  function handleSubmit(e){
    e.preventDefault();
    console.log(email,password)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input placeholder="Email" type="email"
        value={email} onChange={setEmail}/>
      <input placeholder="password" type="password"
        value={password} onChange={setPassword}/>
      <button>Submit</button>
    </form>
  )
}

Теперь наш компонент LoginForm выглядит намного чище с помощью пользовательского хука useInput(). Точно так же мы можем использовать наш хук useInput с другими элементами формы.

Пример с Radio button

function RadioButtons() {
  const [data] = useState({male:"male",female:"female",other:"other"})
  const [gender, setGender] = useInput("");
  function handleSubmit(e) {
    e.preventDefault();
    console.log(gender);
  }

  return (
    <form onSubmit={handleSubmit}>
      <h1>Select Your Gender</h1>
      <div>
        <input type="radio" id={data.male} value={data.male}
          checked={data.male === gender} onChange={setGender}/>
        <label htmlFor={data.male}>Male</label>
      </div>
      <div>
        <input type="radio" id={data.female} value={data.female}
          checked={data.female === gender} onChange={setGender}/>
        <label htmlFor={data.female}>Female</label>
       </div>
       <div>
         <input type="radio" id={data.other}  value={data.other}
           checked={data.other === gender} onChange={setGender}/>
         <label htmlFor={data.other}>Other</label>
       </div>
     <button>submit</button>
    </form>
  )
}

Пример элемента Textarea

function Comments() {
  const [comment, setComment] = useInput("");
  function handleSubmit(e) {
    e.preventDefault();
    console.log(comment);
  }

  return(
    <form onSubmit={handleSubmit}>
      <textarea value={comment} onChange={setComment}/>
      <button>submit</button>
    </form>
  )
}