Приложение React Contact Manager, част 2

В част 2 на тази ще продължим от мястото, където спряхме, където създадохме компонентите, от които се нуждаем, и сега ще започнем с изобразяване на списък.

Тъй като повечето от основните настройки на файловете и компонентите са готови, време е да се захванем с някои от по-забавните неща на React с предаване на подпори, състояние на обработка и много JSX!

Създаване на масив с вложен хеш с някои твърдо кодирани данни, зададени като константа от контакти в App.js:

const contacts = [
  {
    id: "1",
    name: "Shane",
    email: "[email protected]",
  },
  {
    id: "2",
    name: "Tanner",
    email: "[email protected]",
  },
];

Сега предаваме масива с контакти като опора на компонента ContactList:

return (
  <div>
    <Header />
    <AddContact />
    <ContactList contacts={contacts} />
  </div>
);

В компонента ContactList, ако предадем props като аргумент и конзолата го регистрира, трябва да можете да видите данните от масива на контактите в конзолата:

const ContactList = (props) => {
  console.log(props);
  return <div>Contact List</div>;
};
export default ContactList;

Създаване на друга постоянна променлива, където ще картографираме масива с контакти, за да структурираме как ще се показват данните на всеки отделен контакт:

const renderContactList = props.contacts.map((contact => {
  return (
    <div>
      <div>
        <div>{contact.name)</div>
        <div>{contact.email}</div>
      </div>
    </div>
  );
})

• Вложени div за целите на CSS стилизиране по-късно.

Позоваване на новата константа в JSX в връщането на ContactList:

return <div>
  {renderContactList}
</div>

В този момент трябва да видите списъка изведен.

Създаване на компонента ContactCard, където ще преместим кода, който управлява начина, по който данните за контакт ще бъдат показани от ContactList в него:

import React from 'react';
const ContactCard = () => {
  return (
    <div>
      <div>
        <div>{contact.name}</div>
        <div>{contact.email}</div>
      </div>
    </div>
  );
};
export default ContactCard;

Предаване на подпори от ContactList към ContactCard чрез импортиране на ContactCard в ContactList:

import React from 'react';
import ContactCard from './ContactCard.js';
const ContactList = (props) => {
  console.log(props);
const renderContactList = props.contacts.map((contact => {
  return <ContactCard contact={contact} />;
});

И предаване на подпори към ContactCard:

const ContactCard = (props) => {
  return (
    <div>
      <div>
        <div>{contact.name}</div>
        <div>{contact.email}</div>
      </div>
    </div>
  );
};

Настройване на друга постоянна променлива в ContactCard, за да улесните извикването на атрибутите на контакт, след което можете да промените извикванията на „contact.name“ и „contact.email“ само на име и имейл:

const { id, name, email } = props.contact;

В рамките на App.js, премахване на твърдо кодираните данни за контакт и прилагане на метода useState React:

import React, { useState } from 'react';
...
function App() {
  const [contacts, setContacts]= useState([]);
...

Искаме да можем да добавим нов контакт към списъка, когато щракнете върху „Добавяне“ след попълване на формуляра, така че нека добавим състояние към компонента на класа:

class AddContact extends React.component {
  state = {
    name: "",
    email: "",
  };
...
<input 
  type="text" 
  name="name" 
  placeholder="Name"
  value={this.state.name} 
  onChange={(e) => this.setState({name: e.target.value})
/>
...
<input 
  type="text" 
  name="email" 
  placeholder="Email"
  value={this.state.email} 
  onChange={(e) => this.setState({email: e.target.value})
/>

Създаване на функция със стрелка „добавяне“ за обработка на логиката на добавяне на нов контакт в рамките на същия компонент:

...
add = (e) => {
  e.preventDefault();
  if(this.state.name === "" || this.state.email === "") {
    alert("Make sure to fill in all fields!")
    return;
  }
  console.log(this.state);
};
render() {
...
  <form onSubmit={this.add}>
...

Предаване на реквизит от детето към родителя:

function App() {
...
<AddContact addContactHandler={addContactHandler} />

Дефиниране на addContactHandler в App.js и само контакт за регистриране в конзолата за сега:

const addContactHandler = (contact) => {
  console.log(contact);
};

Използвайки манипулатора, който предадохме от компонента App във функцията за добавяне в компонента AddContact, както и задаване на състоянието, така че полетата да се изчистват при добавяне на нов контакт:

add = (e) => {
  e.preventDefault();
  if(this.state.name === "" || this.state.email === "") {
    alert("Make sure to fill in all fields!")
    return;
  }
  this.props.addContactHandler(this.state);
  this.setState({ name: "", email: "" });
};

Използване на setContact за актуализиране на състоянието в компонента на приложението:

const addContactHandler = (contact) => {
  console.log(contact);
  setContacts([...contacts, contact]);
};

Когато попълним формуляра и натиснете „Добави“, новият контакт вече е създаден и показан! Но когато страницата бъде опреснена, новият контакт ще изчезне, тъй като все още трябва да го запазим, когато бъде създаден в нещо като localStorage. Точно оттам ще започнем при следващото влизане в тази серия. Благодаря ви, че прочетохте и се надявам, че те са ви от полза във вашата практика на кодиране на React! Приятно кодиране!

GitHub: