Как создавать типы по электронной почте в чистом реагировании

Автор оригинала: FreeCodeCamp Community Member.

Andreas Remdt.

Представьте, что вы, хорошо выглядящий разработчик (да, я говорю с вами!) Хотите создать форму приглашения, где пользователи могут добавлять одну или несколько адресов электронной почты в список и отправить сообщение всем из них.

Думая о том, как это можно решить лучший путь, я посмотрел на то, что Google делает в своем приложении Gmail. В наложении «Новое сообщение» вы можете ввести адрес электронной почты и нажмите «Return», «Tab» или запятую, чтобы добавить его в список получателей. Вы можете даже вставить кучу адресов электронной почты, и приложение будет продолжаться и разобрать и добавить их в свой список. Довольно аккуратно, не так ли?

Эти визуальные компоненты обычно называют Чипсы или Значки и можно найти в рамках, таких как Материализировать , Bootstrap или Материал интерфейс Отказ

Что мы будем строить

В этом руководстве я хочу построить такую функцию в чистом реагировании без использования любой другой библиотеки или структуры. Мы создадим поле ввода, которое принимает только адреса электронной почты. Пользователь может ввести их один за другим или вставить их кучу, что создаст чипы, как вы можете увидеть и попробовать в примере ниже:

Отказ от ответственности: Есть уже разные NPM пакеты Там, что делает ту же работу, однако, мне нравится реализовывать такие небольшие функции с нуля, поскольку мне не нравится в зависимости от (иногда огромных) 3-й партийных сценариев. Кроме того, это хорошее упражнение для практики ваших навыков реагирования.

Леса проекта

Поскольку нам не нужно ничего особенного для начала, давайте просто использовать Create-React-App Отказ Если вы еще не установили его на вашем компьютере, откройте свой терминал и введите NPM Установить -G Create-React-App Отказ

После того, как команда запустилась, Create-React-App Должна быть установлена (если вы получите ошибку во время установки, вам может потребоваться запустить ее с привилегиями администратора: Sudo NPM Установить -g Create-ract-app ) и готов к использованию.

Зайдите в свое рабочее пространство и введите Create-React-App Chips Отказ В моем случае я собираюсь назвать мою папку Чипсы , но вы можете выбрать любое имя, которое вы предпочитаете.

Create-React-App Подойдут и сделаю свою вещь, устанавливая все зависимости, которые нам нужно начать. После этого было сделано, вы можете ввести CD Chips войти в наш недавно созданный каталог и NPM начать загрузить сервер разработки. Если все прошло хорошо, вам следует встретить экран App app default.

Организация проекта

В нашем Чипсы Каталог У нас есть куча папок и файлов, которые были созданы для нашего удобства. Мы будем работать в SRC/App.js На самом раз, настолько откройте этот файл в вашем любимом редакторе кода.

Удалить весь код, который вы видите внутри App.js Отказ Далее давайте добавим базовый компонент класса Ract React:

import React from 'react';

class App extends React.Component {
  render() {
    return 
Hello World
;
  }
}

После сохранения App.js , вы должны увидеть ваш браузер обновить автоматически. Когда-то темная страница с логотипом React исчезла, вместо этого у нас есть простой текст «Hello World», установленный на экран. Отлично!

Поле ввода и состояние

В качестве следующего шага мы заменим не так полезно «Hello World» текст в нашем JSX с чем-то более подходящим: входным элементом.

return (
  
);

Теперь у нас есть HTML-входной элемент с Зажигатель Атрибут, который покажет, пока пользователь ничего не вошел.

Ниже Зажигатель атрибут вы заметите то, что довольно распространено в мире реагирования, известного как Управляемый компонент Отказ Обычно элементы формы HTML, такие как вход или Textarea иметь свое собственное состояние, которое мы можем прочитать и писать с помощью методов DOM, как Document.getelementbyId («вход»). Значение Отказ

Использование контролируемых компонентов, идея состоит в том, что наше состояние реагирования является одним источником сквозного источника, что означает, что значение входа и наше состояние синхронизации.

Это позволяет нам манипулировать введенными данными На лету И добавить определенные функциональные возможности, которые нам понадобится позже.

Если вы сохраните и запустите это в своем браузере, вы увидите сообщение об ошибке Типерре: Не удается прочитать свойство «Значение» NULL Отказ Если вы посмотрите на фрагмент кода, имеет смысл, потому что мы пытаемся получить доступ к ценность от Это , но мы еще не создали штат, и у нас есть HandleChange Метод контролировать наше состояние. Давайте добавим их.

class App extends React.Component {
  state = {
    value: ''
  }
  
  handleChange = (evt) => {
    this.setState({
      value: evt.target.value
    });
  };
  
  render() { ... }
}

Во-первых, мы инициализируем Государственный объект который содержит пустую ценность свойство. Ниже мы определяем метод HandleChange который будет называться каждый раз Изменить событие На входном элементе уволено. HandleChange Затем работает и обновляет состояние, используя SetState Отказ

evt.target.value Ничто не реагирует, дает нам; Это выходит из коробки с JavaScript. EVT.Target это вход, в который мы набрали, ценность это введенное значение (как удивительно).

Идите вперед и попробуйте: в вашем браузере вы должны иметь возможность что-то вводить в вход. То, что вы не видите, это то, что за кулисами вы напечатаны данные в данных, синхронизируются с состоянием вашего компонента реагирования. Такая магия!

Добавление электронных писем как чипсы

Следующим шагом является возможность позволить пользователю добавлять электронные письма в список, нажав «Return», «Tab» или клавишу запятой на их клавиатуре. Прежде чем мы сможем сделать такую вещь, нам нужен список (или, скорее, массив) в нашем состоянии, где мы можем добавить электронные письма:

state = {
  value: '',
  emails: []
}

Теперь, когда у нас есть массив для работы, нам нужно отреагировать (каламбур) на пользователей нажав эти специальные клавиши. Лучший способ сделать это – это Событие в ключе :

return (
  
);

Обратите внимание, как я добавил lekeydown Слушатель событий, который относится к следующему способу:

handleKeyDown = (evt) => {
  if (['Enter', 'Tab', ','].includes(evt.key)) {
    evt.preventDefault();
      
    var email = this.state.value.trim();
      
    if (email) {
      this.setState({
        emails: [...this.state.emails, email],
        value: ''
      });
    }
  }
};

Ух ты, здесь так много, верно? Не волнуйтесь, давайте пройдемся через изменения, шаг за шагом:

1. Если (['Enter', 'вкладка', ',']. включает в себя (evt.key)) Там, где начинается магия: внутри этого условия мы проверяем, если нажатый ключ ( EVT.Key ) является одним из наших триггеров. Я создал массив с этими тремя клавишами (вы можете легко добавить другую клавишу, как «Пространство»). Используя включает в себя Метод мы проверяем, наша нажатая клавиша часть массива. Это сказал, если пользователь нажимает «вкладку», то EVT.Key будет Вкладка что существует внутри массива, поэтому условие верно.
2. Если условие верно, мы предотвратим по умолчанию. Обычно, нажав клавишу «вкладку», находясь внутри входного элемента, вы будете сосредоточены на другом элементе на странице или браузере ( навигацию клавиатуры ), что означает, что мы оставили наш текущий вход. Но используя EVT.PreventDefault () , вы можете переопределить поведение браузера по умолчанию.
3. Ниже мы сохраняем вход, который мы до сих пор. this.state.value Всегда содержит то, что введен пользователь, вот что наше HandleChange метод для. Использование обрезать Просто позволяет нам удалить пробел до или после ввода.
4. Далее мы проверяем, действительно ли пользователь ввел некоторые данные. Если нет, мы не хотим ничего делать.
5. Однако, если Email На самом деле содержит некоторые данные (которые действительно могут быть в прямом эфире), мы добавляем его в Письма Массив в нашем состоянии.
6. Наконец, мы сбрасываем ценность Свойство в нашем состоянии, что означает, что наше поле ввода будет очищено, и пользователь может начать набрать новый адрес электронной почты (если он хочет). Это красота контролируемых компонентов!

Вы можете удивить, что [... this.state.emails, Email] делает, верно? Ну, это довольно новая функция JavaScript называется S Pread Syntax Отказ 3 точка означают, что мы извлекаем все электронные письма от this.state.emails Отказ Теперь, когда мы их извлекли, мы можем объединить их вместе с нашим новым Email в новый массив. Наконец, мы переопределяем наш текущий Письма свойство, присваивая вновь созданное массив к нему. Если вы хотите прочитать больше об этой технике и почему мы не можем использовать array.push () Посмотрите на это Поток переполнения стека Отказ

Продолжай и попробуй. Введите что-то в поле ввода и нажмите любую из наших трех триггеров. Подожди, ничего не происходит, вы говорите? Ну, это как ожидается, потому что, хотя мы добавляем каждый вход на наш массив электронной почты, мы действительно ничего не делаем с ним, мы? Время, чтобы распечатать их:

return (
  
    {this.state.emails.map(email => 
{email}
)}
    
    
  
);

Если вы посмотрите на JSX выше, вы увидите, что я завернул весь наш выход с помощью Фрагмент реагирования и поставить выражение выше поля ввода.

Фрагмент – это так, что мне не нужно сделать ненужный HTML-элемент в DOM.

Выражение на линии 3 это еще один Типичный шаблон реагирования То, что вы найдете практически во всех приложениях: здесь мы будем петли (или карта, быть более лаконичными) над Письма Массив из нашего состояния и вывод A Div для каждого предмета. Div Имеет адрес электронной почты в качестве текстового контента (и не забывайте Ключ Опора, или реагирование будет злиться на вас).

Давайте посмотрим, что мы достигли до сих пор:

Удаление электронных писем из списка

Это здорово и все, но что, если вы добавили кого-то, что – скажем, вам не нравятся? Нам нужна функция для удаления уже добавленных электронных писем из списка!

{this.state.emails.map(email => (
  

    {email}
    
      this.handleDelete(email)}
    >
      ×
    
  
))}

Посмотрите на код выше. Помните, что когда мы добавили JSX, чтобы включить все электронные письма и распечатать их? Это тот же блок кода, но теперь я добавил кнопку внутри наших Div у этого есть Нажмите событие слушатель. Этот слушатель собирается позвонить Обрабатывается Как только пользователь нажимает кнопку.

Обратите внимание, как этот вызов функции отличается, хотя. Это на самом деле функция стрелки, которая вызывается и в обратном направлении вызывает Обрабатывается Способ с параметром, в этом случае наше письмо.

Это другой подход от того, что вы видели до сих пор, где мы только что сделали что-то вроде Onchange = {это. HandleChange} Отказ Причина в том, что на этот раз нам нужно пройти электронное письмо, что пользователь хочет избавиться от нашего метода в качестве параметра, в противном случае мы не сможем знать, какое электронное письмо удалить. Если вы хотите узнать больше деталей, Эта статья Вы покрыли.

Давайте реализуем Обрабатывается Метод:

handleDelete = (toBeRemoved) => {
  this.setState({
    emails: this.state.emails.filter(email => email !== toBeRemoved)
  });
};

Все, что мы делаем здесь, – это снова установить наше состояние, но на этот раз мы отфильтровали адрес электронной почты, который был передан в качестве параметра. Фильтр Метод в JavaScript приходит довольно удобно в таких случаях.

Нам не нужно использовать странный синтаксис распространения, который вы видели ранее ( [... Array1, Newitem] ), потому что Фильтр Возвращает новый массив, который не содержит значение, которое мы просто отфильтровывали. Затем мы можем установить этот новый массив как наш Письма список.

Сделать это красивым

Если вы подобны мне, вы можете приостановить прямо сейчас о количестве неизменного содержания. Давайте сделаем этого плохого мальчика довольно:

return (
  

    {this.state.emails.map(email => (
      

        {email}
        
          this.handleDelete(email)}
        >
          ×
        
      
    ))}
    
    
  
);

1. Первое, что вы заметите, это то, что я заменил Реагировать с <Главное ClassName = “Wrappe R">. Это только для целей укладки, я хочу отменить обертку на моей странице. Я также добавил несколько классов на вход, кнопку и чипсы, что получит хороший стиль из нашего файла CSS.
2. В верхней части файла ниже
3. Импорт реагирует от «Реагистрация» Я добавил еще один импорт: Импорт ‘./app.css’ Отказ Если вы использовали Create-React-App , скорее всего, найду App.csss В вашем SRC каталог. Я только что переименован в нижние app.css app.css и импортировал его.

Вы можете Найти CSS здесь Я не покажу это в этом месте, так как он добавит слишком много раздува к этой уже длинной статье.

Давайте посмотрим, что выглядит наше приложение сейчас:

Проверка

Наш компонент снимает форму, но вы можете задаться вопросом, что произойдет, если пользователь вступает в несколько гибберов вместо фактического адреса электронной почты, верно? ВЕРНО?

В настоящее время наш компонент принимает все виды ввода, которые мы должны исправить как следующий шаг. Давайте добавим isvalid Способ первого:

isValid(email) {
  var error = null;
  
  if (!this.isEmail(email)) {
    error = `${email} is not a valid email address.`;
  }
  
  if (this.isInList(email)) {
    error = `${email} has already been added.`;
  }
  
  if (error) {
    this.setState({ error });
    
    return false;
  }
  
  return true;
}

isvalid Метод получает один параметр, который является входом (в лучшем случае адрес электронной почты), который мы хотим подтвердить. Инициализирует Ошибка . переменная с null , что означает, что у нас еще нет ошибок.

Затем мы видим 2 если условия. Первый проверка, если значение является действительным электронным письмом, использующим Исмард Метод:

isEmail(email) {
  return /[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/.test(email);
}

Здесь мы получаем один параметр, который должен, но не может быть почтой, который мы хотим добавить. Используя регулярное выражение и Тест Метод, мы проверяем, действительно ли это действительный адрес электронной почты.

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

Второй метод Исинлист Также получает один параметр (электронное письмо) и проверяет, был ли он уже добавлен к нашему Письма массив в состоянии. Опять же, потрясающий включает в себя Метод используется:

isInList(email) {
  return this.state.items.includes(email);
}

Все что наше isvalid Метод имеет значение, это использовать два других метода для проверки, если заданное значение является действительным адресом электронной почты и еще не частью нашего списка. Если ни одно из этих условий не верно, мы не устанавливаем никаких ошибок и возврата правда Отказ

В противном случае, если один из этих условий на самом деле правда, что означает, что электронное письмо недействительно или уже в списке, мы устанавливаем сообщение об ошибке и вернуть ложь Отказ Ошибка проживает в состоянии нашего компонента, поэтому нам нужно добавить свойство IT:

class App extends React.Component {
  state = {
    value: '',
    emails: [],
    error: null
  }
  
  // ...
}

Обратите внимание, что свойство Error инициализируется с помощью null Потому что, когда мы изначально загружаем приложение, конечно, нет ошибки.

Две вещи все еще отсутствуют: в нашем HandleyDown Метод нам нужно на самом деле использовать isvalid метод. И мы должны отображать ошибку к пользователю, в противном случае, имея сообщение об ошибке в первую очередь, было бы довольно бессмысленным.

handleKeyDown = (evt) => {
  if (['Enter', 'Tab', ','].includes(evt.key)) {
    evt.preventDefault();
    
    var email = this.state.value.trim();
    
    if (email && this.isValid(email)) {
      this.setState({
        emails: [...this.state.emails, email],
        value: ''
      });
    }
  }
};

Помните HandleyDown метод? Я уверен, что надеюсь, что вы сделаете, потому что вам нужно изменить его, чтобы получить проверку. В строке 7, обратите внимание, что я добавил && this.isvalid (электронная почта) внутри условия. Это означает, что мы сейчас используем нашу проверку, передавая его значение, в который пользователь набрал. Только если Email имеет фактическую ценность и Это действительный адрес электронной почты, который мы продолжаем, установив состояние.

Последняя часть головоломки состоит в том, чтобы показать сообщение об ошибке пользователю.

return (
  

    {this.state.emails.map(email => (
      // Hidden...
    ))}
    
    
    
    {this.state.error &&
      
{this.state.error}
}
  
);

Две вещи изменились:

1. Ниже вход Мы Условно визуализировать абзац с нашим сообщением об ошибке в качестве контента текста.
2. классное значение нашего ввода больше не простая строка, а выражение JSX, которое добавляет имеет-ошибку на имя класса, если Ошибка . правда. Это полезно для того, чтобы наш вклад какой-то пользовательский стиль, если он недействителен.

Продолжай и попробуй результат в вашем браузере. Попробуйте ввести неверный адрес электронной почты или один, который уже является частью списка. Вы должны увидеть, что сообщение об ошибке отображается под входом.

Хотя есть одна проблема: если вы сделали сообщение об ошибке, оно останется навсегда, даже если вы добавите действительный адрес электронной почты позже. Нам нужно сбросить ошибку после того, как пользователь снова начнет печатать:

handleChange = (evt) => {
  this.setState({
    value: evt.target.value,
    error: null
  });
};

Наше HandleChange Метод – лучшее место для этого! Он вызывается каждый раз, когда пользователь меняет значение ввода, что означает, что мы можем установить ошибку в null опять таки. Если пользователь не изучил свой урок и пытается еще раз добавить неверный адрес электронной почты, то … ну, сообщение об ошибке повторно появится.

Обработка вклейки из буфера обмена

Наш маленький компонент вырос совсем немного и стал несколько полезным, но одна важная особенность все еще отсутствует: вставка в адреса электронной почты из буфера обмена.

Этот может быть довольно интересным, потому что пользователи могут захотеть скопировать кучу адресов электронной почты из их почтового приложения и вставьте их все сразу. Различные почтовые приложения, однако, имеют разные форматы. Если вы скопироваете кучу электронных писем из приложения Apple Mail, это выглядит так:

To: John Doe  Cc: Jane Doe 

Ваше приложение может справиться с этим по-другому. Итак, как мы разбираем эти строки, чтобы получить только часть, которую мы хотим?

handlePaste = (evt) => {
  evt.preventDefault();
  
  var paste = evt.clipboardData.getData('text');
  var emails = paste.match(/[\w\d\.-]+@[\w\d\.-]+\.[\w\d\.-]+/g);
  
  if (emails) {
    var toBeAdded = emails.filter(email => !this.isInList(email));
    
    this.setState({
      emails: [...this.state.emails, ...toBeAdded]
    });
  }
};

Вышеуказанный метод многое для переваривания, так что давайте погрузимся вправо в.

1. В строке 2 мы предотвращаем по умолчанию, что означает, что текст на самом деле не вставлен в поле ввода. Мы обработаем это самостоятельно.
2. В строке 4 мы получаем данные буфера обмена, которые пользователь собирался вставить с помощью API буфера обмена Отказ паста это строка.
3. Ниже, на линии 5, мы используем Матч Способ применения регулярного воздействия в наших данных буфера обмена. Матч Метод будет просмотреть всю нашу строку и получить все части, которые соответствуют нашему регулярному выражению (это тот же, который мы использовали для части проверки). Результатом является массив матчей или undefined Если ничего не совпадают.
4. В строке 7 мы проверяем, есть ли какие-либо фактические электронные письма. Если это так, мы фильтруем их в строке 8, чтобы исключить электронные письма, которые уже в нашем списке. Фильтр Наш друг еще раз. Переменная Просвещенные Теперь должен быть массив с электронными письмами, которые еще не являются частью нашего списка. Обратите внимание, как мы красиво повторно использовали наши Исинлист метод.
5. В строке 10 мы используем Распространение синтаксиса Снова объединить наши нынешние Письма Массив с недавно созданным Просвещенные множество.

Обратите внимание, как мы не подтвердили электронные письма, используя Исмард Отказ Этот шаг неявно сделан, потому что мы полагались на то же регулярное выражение, чтобы получить все действительные адреса электронной почты. Если пользователь вставил неверный адрес электронной почты, он никогда не сделает его.

Все, что не хватает связь между нашим входом и HandlePaste Метод:

К счастью, Вставить событие Вы покрыли.

Вывод

Там у вас есть, наш готовый компонент, который принимает несколько адресов электронной почты и даже позволяет вставить их.

Конечно, если бы вы могли добавить больше функций и улучшений, вот несколько примеров:

• Если пользователь вводит адрес электронной почты, но не нажимает «Ввод» или «вкладка», что должно произойти? Вы можете прикрепить Blur Event На вход, который пытается проверить и добавить содержимое, если пользователь нажимает на что-то еще на странице, как кнопка отправки.
• Вы можете сделать клипсы, чтобы пользователь мог выбрать их для редактирования адреса электронной почты.
• Доступность, безусловно, может быть улучшена, облегчая для чтения с экрана.

Я надеюсь, что вам понравилось это руководство, не стесняйтесь сказать мне свои предложения или отзывы. Счастливое кодирование!