React UseState āķu izmantošana reālā “Mērķu lietotnes” kodā

Iedomājieties kādu uzņēmumu, vai projektu tā agrīnajos laikos, kad tas vēl pastāv tikai uz papīra. Īpašnieks, jeb dibinātājs, vai projekta veidotājs vēlētos lietotni, kas izsekotu plāna attīstībai un visu saistīto mērķu sasniegšanai. Izveidosim šādas lietotnes vienkāršu uzmetumu, ko būtu iespējams vēlāk papildināt un pielāgot savām vajadzībām pēc nepieciešamības.

Izpētīsim, kā izveidot mērķu lietotni ar aprakstītajām prasībām, izmantojot komponenta izmantošanas “steita” āķi un statusa atjaunināšanu.

Pilns lietotnes piemēra kods ar jau pievienotu CSS stilu attēlā:

Pirmais ievades lauks ir paredzēts, lai ļautu īpašniekam ierakstīt savu mērķi, bet otrais ievades lauks ir paredzēts, lai ļautu viņam ierakstīt veidu, kādā šis mērķis varētu tikt sasniegts. Pats kods sastāv no trim atsevišķām sastāvdaļām.

• funtion GoalForm(props) {} – kurš saņem jaunu mērķi izmantojot formu
• function ListOfGoals(props) {} – kurš attēlo iepriekš pievienotos mērķus un sasniegumus parādot tos, kā nepakārtotu sarakstu (<ul>)
• export default function APP() {} – kurš ir App komponents un savieno divus iepriekšējos caurejot tiem izmantojot props

 Izpetīsim nedaudz dziļāk:

Pirmais komponents, proti, mērķa formas komponents, pieņem uzvedņu objektus. Mērķa formas funkcijas pamattekstā es sāku ar formData stāvokļa mainīgā deklarēšanu, kas ir destrukturēts no “useState hook” izsaukuma. Es inicializēju šo veidlapas datu mainīgo kā objektu ar diviem rekvizītiem, { goal: “”, by: “”} , abiem ir piešķirtas tukšu virkņu vērtības.

Tālāk es deklarēju divas funkcijas:

• izmaiņu apstrādātāju changeHandler un
• iesniegšanas apstrādātāju submitHandler.

Pirmā ir izmaiņu apstrādātāja changeHandler funkcija, kas pieņem (e) parametru. Šis (e) parametrs ir viegli pieejams notikumu objekts. Citiem vārdiem sakot, man nav jānodod šis objekts no mana changeHandler. To man nodrošina mehānisms ārpus React. Pat parastā JavaScript ikreiz, kad notikums tiek aktivizēts, tiek izveidots notikuma objekts ar daudziem dažādiem ar notikumu saistītiem datiem. Pēc tam es varu izmantot šo notikuma objektu, vienkārši piešķirot tam pielāgotu nosaukumu, piemēram, (e), (evt) vai (event). Šeit es izmantoju burtu (e), lai kods būtu īss. changeHandler funkcijas pamattekstā es atjauninu sava veidlapas datu mainīgā steitu, izsaucot iepriekš destrukturētu veidlapas datu stāvokļa iestatīšanas mainīgo, kas bija destrukturēts no izsaukuma uz steita āķi.

setFormData({ ...formData, [e.target.name]: e.target.value });

Iestatītās formas datu funkcija pieņem seklu formas datu mainīgā iepriekšējās vērtības klonu. Tas ir veidlapas datu mainīgais ar izkliedes operatoru pirms tā. Atcerieties, ka jums nevajadzētu strādāt ar veidlapas datu mainīgo tieši, tāpēc es veidoju kopiju. Tas ir tāpēc, ka React optimizē savu virtuālo DOM. Stāvokļa nemainīguma saglabāšana ļauj efektīvāk un rentablāk salīdzināt virtuālā DOM iepriekšējo versiju ar atjaunināto versiju. Tālāk es atjauninu šo jauno veidlapas datu objekta kopiju, pievienojot šo kodu,

[e.target.name]: e.target.value

tas nolasa (e) mērķa nosaukumu, izmantojot iekavas apzīmējumu. Pēc tam iestata šī rekvizīta vērtību uz visu, kas atrodas šajā notikuma objekta instances rekvizītā e.target.value, kas tika izveidots, kad konkrēts notikums tika aktivizēts. Iemesls, kāpēc tas darbojas ar iekavu apzīmējumu, ir tāds, ka tas ļauj man iestatīt dinamiski nosauktā (e) mērķa vērtību. Citiem vārdiem sakot, tas ļauj man iestatīt to kā mērķi, ja lietotājs ierakstīja ievadē ar nosaukuma atribūtiem, kas iestatīti uz Goal (Mērķis) vai iestatīt to kā By, (mērķa izpilde) Ja lietotājs ievadē ierakstīja ar nosaukuma atribūtiem, kas iestatīti uz By.

no šīs koda daļas:

{ goal: "", by: ""}

Pilns changeHandler kods:

function changeHandler(e) {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }

Otrkārt, es deklarēju iesniegšanas apstrādātāja submitHandler funkciju, kas arī pieņem notikuma (e) (event) atribūtu. Mērķa (Goal) veidlapas komponents saņem rekvizītu (prop), kas nosaukts sadaļā  <GoalForm onAdd={addGoal} /> koda beigās , un es piešķiru tai funkcijai pievienot mērķi kā rekvizītu vērtību. Bet tā nav tikai jebkura funkcija. Patiesībā tā ir funkcija, kas ir deklarēta tieši šeit 43. rindiņā pašā lietotnes komponentā.

function addGoal(goal) { updateAllGoals([...allGoals, goal]); }

Šī mērķa pievienošanas funkcija pieņem mērķa ierakstu un atjaunina mērķu pievienošanas “steita” mainīgā vērtību, kas tiek glabāta lietotnes funkcijā. Tas tiek darīts, pievienojot šo mērķa ierakstu iepriekšējo mērķu sarakstam, kas saglabāti un izsekoti lietotnes komponenta visu mērķu “steita” mainīgajā. Jebkura stāvokļa mainīgā atjaunināšanai jāveic iepriekš destrukturētā “steita” atjaunināšanas funkcija. Lietojumprogrammas komponenta gadījumā “steita” atjaunināšanas funkcija ir visu mērķu atjaunināšanas funkcija. Tāpēc es izsaucu “steita” atjaunināšanas funkciju mērķa pievienošanas funkcijā. Lai tas viss darbotos, man ir arī jānodod mērķa foruma JSX elementam lietojumprogrammas komponenta atgriešanas paziņojumā ietvertā mērķa funkcijas definīcija. Tāpēc mērķa pievienošanas funkcija tagad ir pieejama kā rekvizīts ar nosaukumu Pievienot mērķa veidlapas funkcijā, un tāpēc es tagad varu to izmantot iesniegšanas apdarinātāja funkcijā, sākot no 10. rindiņas.

 function submitHandler(e) {
    e.preventDefault();
    props.onAdd(formData);
    setFormData({ goal: "", by: "" });
  };

Esmu atpakaļ mērķa veidlapas funkcijā. deklarācija. Kad šeit 12. rindiņā

 props.onAdd(formData);

tiek izsaukts atbalsta punkts funkcijai onAdd, tas saņem formas datu mainīgo, kas aktivizē visu mērķu stāvokļa mainīgā atjaunināšanu lietotnes komponentā, kā aprakstīts iepriekš. Man joprojām ir veidlapa, kurā norādītas vērtības, kuras ievadījis lietotājs. Lai to atrisinātu, veidlapas datu “steita” mainīgais ir jāatiestata uz tukšu virkni gan veidlapas datu “steita” objekta mērķa rekvizītā, gan formas datu “steita” objekta by rekvizītā. Tagad es nonāku pie ListOfGoals formas funkcijas atgriešanās paziņojuma.

setFormData({ goal: "", by: "" });

Es vēlos, lai jūs koncentrētos uz veidlapas elementu, kura iesniegšanas notikumu apstrādes atribūts ir iestatīts kā iesniegšanas apstrādātāja funkcija. Gan pirmajai, gan otrajai ievadei ir tāda pati struktūra, kurā ir tips, nosaukums, vietturis, vērtība un izmaiņas atribūts, kas iekļaujas iepriekš aprakstītajā funkcionalitātē.

      <form onSubmit={submitHandler}>
        <input type="text" name="goal" placeholder="Mans mērķis ir(kāds?):" value={formData.goal} onChange={changeHandler} />
        <input type="text" name="by" placeholder="Sasniegšu savu mērķi(kā?):" value={formData.by} onChange={changeHandler} />
        <button>Saglabāt mērķi</button>
      </form>

Pārejot uz ListOfGoals komponentu sarakstu,

function ListOfGoals(props) {
  return (
    <ul>
      {props.allGoals.map((g) => (
        <li key={g.goal}>
          <span>Mans mērķis ir: {g.goal}, sasniegšu to: {g.by}</span>
        </li>
      ))}
    </ul>
  );
}

šis komponents saņem visu mērķa “steita” mainīgo kā pamatu no savas vecāklietotnes komponenta. Tā mērķis ir kartēt visu mērķu objektu masīvu, kurā katram objektam ir divas īpašības, kas raksturo vienu mērķi, kā paskaidrots iepriekš.

Kartējot visu mērķu objektu masīvu, es tagad izvadu šo <ul> sarakstu

    <ul>
      {props.allGoals.map((g) => (
        <li key={g.goal}>
          <span>Mans mērķis ir: {g.goal}, sasniegšu to: {g.by}</span>
        </li>
      ))}
    </ul>

ar saraksta vienuma ierakstu katram atsevišķam mērķim.

Pilns aplikācijas kods:

import React from "react";


function GoalForm(props) {
  const [formData, setFormData] = React.useState({ goal: "", by: ""});


  function changeHandler(e) {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  }
  function submitHandler(e) {
    e.preventDefault();
    props.onAdd(formData);
    setFormData({ goal: "", by: "" });
  };


  return (


    <>
      <h1>Mani mērķi:</h1>
      <form onSubmit={submitHandler}>
        <input type="text" name="goal" placeholder="Mans mērķis ir(kāds?):" value={formData.goal} onChange={changeHandler} />
        <input type="text" name="by" placeholder="Sasniegšu savu mērķi(kā?):" value={formData.by} onChange={changeHandler} />
        <button>Saglabāt mērķi</button>
      </form>
    </>
  );


}
function ListOfGoals(props) {
  return (
    <ul>
      {props.allGoals.map((g) => (
        <li key={g.goal}>
          <span>Mans mērķis ir: {g.goal}, sasniegšu to: {g.by}</span>
        </li>
      ))}
    </ul>
  );
}


export default function App() {
  const [allGoals, updateAllGoals] = React.useState([]);


  function addGoal(goal) { updateAllGoals([...allGoals, goal]); }


  return (
    <div className="App">
      <GoalForm onAdd={addGoal} />
      <ListOfGoals allGoals={allGoals} />
    </div>
  );
}

Papildinājums lietotnes kodam:

Lai izveidotā aplikācija nebūtu tikai skumīga un prasta lodziņu ievades sistēma ar pogu, es pievienoju arī pavisam vienkāršu CSS stilu, kurš padara aplikāciju skatāmāku un sniedz ieskatu par to, kā iespējams izmainīt un pielāgot aplikācijas izskatu savām vajadzībām. Kodā iekļāvu arī komentārus, kas paskaidro katru koda daļu.

index.css kods:

/* Centrē aplikāciju un piešķir tai fona gradientu */
.App {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: radial-gradient(circle, rgb(243, 213, 213) 0%, rgb(233, 141, 4) 100%);
}


/* Stilizē formu ar noapaļotiem stūriem un stikla efektu */
form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 20px;
  transform: scale(2);
  background: linear-gradient(to right bottom, rgba(255,165,0,0.5), rgba(255,165,0,0));
  box-shadow: -5px -5px 10px rgba(255,255,255,0.1),
              5px 5px 15px rgba(0,0,0,0.5);
}


/* Stilizē pogu ar noapaļotiem stūriem un baltu kontūru */
button {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background-color: rgb(241, 209, 27);
  border: 2px solid white;
}


/* Pievieno animāciju pogai virs kuras atrodas peles kursors */
button:hover {
    cursor:pointer;
    animation-name: pulse;
    animation-duration: .5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}


/* Animācijas definīcija */
@keyframes pulse {
    from { transform: scale3d(1,1,1); }
    to { transform: scale3d(1.05,1.05,1.05); }
}


/* Stilizē tekstu ar baltu krāsu un lielāku izmēru */
ul {
  color: white;
  margin-top: 150px;
  font-size: 35px;
  text-align: left;
}


/* Stilizē virsrakstu ar oranžu krāsu */
h1 {
  color: rgb(228, 116, 41);
}


/* Stilizē ievades logus ar noapaļotiem stūriem un oranžu kontūru */
input {
  border-radius: 6px;
  border:2px solid rgb(236,146,61);
}

NOBEIGUMĀ:

Protams vēlos atzīmēt, ka šī aplikācija nekādā gadījumā nav pabeigts galaprodukts, bet gan piemērs un uzskatāms līdzeklis mācību procesā, ko varat izpētīt izveidot paši un papildināt pēc saviem ieskatiem un nepieciešamības.

Tagad, kad esat strādājis ar mērķu lietotnes kodēšanu programmā React, jums vajadzētu gūt lielāku ieskatu par statusa āķa izmantošanu komponentā, tostarp par to, kā deklarēt, lasīt un atjaunināt steitu.