Veidojam kontrolētu formas komponentu – atsauksmes un vērtējums

Vai nesen esat iegādājies produktu e-komercijas vietnē vai varbūt rezervējāt galdiņu savā iecienītākajā restorānā? Ja tā, iespējams, pēc tam esat saņēmis draudzīgu e-pasta ziņojumu ar saiti uz konkrētu lapu, lai sniegtu atsauksmes par pieredzi.

Šajā rakstā parādīšu Jums piemēru, kā React izveidot atsauksmju veidlapas.

Tagad, kad esat iepazinies ar kontrolētajiem React komponentiem manos iepriekšējos rakstos, es parādīšu, kā jūs pats varat izveidot šo funkcionalitāti. Jūs arī izmantosiet diapazona ievadi (range input) un pielāgotu validāciju kā daļu no atsauksmju veidlapas izveides. Iedomājieties, ka viens no labākajiem restorāniem pilsētā, vēlētos nosūtīt saviem klientiem atsauksmju veidlapu. Turpināsim un ieviesīsim atsauksmju veidlapu, izmantojot React.

Ņemiet vērā, ka šajā piemērā projekts ir izveidots, izmantojot lietotni npx create-react-app . Tātad sāksim ar standarta noklusējuma React app dotajiem aparametriem un izskatu, ko mēs jau pazīstam.

Tātad es izdzēšu visu React sākotnēji doto kodu iekš App.js un rakstu savu kodu, lai veidotu bloku ar pogu atsauksmes sākuma kodam. Pašlaik aizstātais kods izskatās šādi:

import "./App.css";


function App() {
  return (
    <div className="App">
      <form>
        <fieldset>
          <h2>Atsauksmes forma</h2>
          <button type="submit">Nosūtīt atsauksmi</button>
        </fieldset>
      </form>
    </div>
  );
}


export default App;

un kopskatījums ar kodu IDE un pārlūka attelojumu ir šāds:

Prasības šim piemēram ir saskarne, kas ļauj lietotājiem norādīt punktu skaitu no 0 līdz 10 un pēc tam pievienot papildu komentāru, lai pastāstītu šefpavāram, cik garšīgs bija ēdiens, ko viņi baudīja pirms dažām dienām. Pirmais solis ir ieviest rezultāta kontroli. Ir dažādi veidi, kā to izdarīt, taču es izvēlēšos diapazona ievadi šim  gadījumam, jo tas nodrošina lietotājam vienkāršu slīdni.

Lai to izdarītu, turpināsim un izveidosim jaunu div, lai iesaiņotu komponentu.

          <div className="Field">
            <label>Novērtējums: </label>
            <input type="range" min="0" max="10" />
          </div>

Tas sastāvēs no etiķetes “label”, kuru es nodēvēšu par “Novērtējums”, kā arī ievades, kuras veids būs kā diapazons. Diapazona ievadēs piedāvāšu divas uzvednes, lai definētu diapazonu, min un max. Šajā piemērā es iestatīšu minimālo vērtību uz 0 un maksimālo vērtību uz 10. Tagad lietojumprogramma parāda lietotājam draudzīgu slīdni, lai nodrošinātu rezultātu. Lai pabeigtu diapazona komponentu, man ir jādara vēl divas lietas. Pārvērtiet ievadi kontrolētos komponentos un vizuāli parādiet skaitlisko vērtību, kas apzīmē slīdņa atlasi. Šim nolūkam es definēšu jaunu steita daļu, ko sauc par score, ko inicializēšu uz 10, jo zinu, ka šefpavāra recepte parasti ir nepārspējama, ļaujot lietotājam samazināt punktu skaitu no 10, kad viņš mijiedarbojas ar slīdni, ja viņš to vēlas.

Tagad diapazona ievadē man ir jāizmanto vērtības prop, lai piesaistītu stāvokli un izmantotu onchange, lai saņemtu izmaiņas un attiecīgi atjauninātu stāvokli. Tā kā es arī vēlos, lai skaitliskais rezultāts tiktu parādīts ar slīdni, es pievienošu šo informāciju novērtētajai etiķetei kopā ar zvaigznīti, lai lietotāja interfeiss būtu tīrs un kodolīgs.

import "./App.css";
import { useState } from 'react';
function App() {
  const [score, setScore] = useState("10");
  return (
    <div className="App">
      <form>
        <fieldset>
          <h2>Atsauksmes forma</h2>
          <div className="Field">
            <label>Novērtējums:<br />
              {score}⭐</label>
            <input
              type="range"
              min="0"
              max="10"
              value={score}
              onChange={e => setScore(e.target.value)} />
          </div>
          <button type="submit">Nosūtīt atsauksmi</button>
        </fieldset>
      </form>
    </div>
  );
}


export default App;

Lieliski, atsauksmju veidlapa sāk veidoties. Tagad ieviesīsim otro elementu no logrīka formas, lai sniegtu papildu iespējas apmeklētājam pievienot komentāru. Lai gan šeit varētu izmantot teksta ievadi, komentārs varētu būt ļoti liels. Tāpēc piemērotāka izvēle ir teksta apgabals (Text area). Šim nolūkam es pievienošu citu steita mainīgo ar nosaukumu komentāri “comment”, kas tiks inicializēti ar tukšu virkni.

const [comment, setComment] = useState(" ");

Lietotāja saskarnei es izveidošu jaunu div ar etiķeti “label” un teksta apgabala komponentu, lai iegūtu papildu atsauksmes.

          <div className="Field">
            <label>Komentārs:</label><br />
            <textarea />
          </div>

Tagad, kad tas ir labi atveidots, man ir jāpievieno statuss vērtības atbalstam un jāatjaunina izmaiņas, izmantojot onchange.

Līdz ar to atsauksmju veidlapas lietotāja saskarne ir pabeigta. Pēdējā lieta, ko es vēlētos ieviest, ir pārbaude, lai nodrošinātu, ka komentārs ir nepieciešams, ja rezultāts ir vienāds ar pieciem vai mazāks par tiem, un tajā ir jābūt vismaz 10 rakstzīmēm. Šefpavārs saņem godīgas atsauksmes no lietotājiem, kuras var izmantot viņa receptes uzlabošanai. Šim nolūkam es izmantošu veidlapas komponenta atzvanīšanas funkciju. Vispirms izsaukšu preventīvo noklusējumu, lai izvairītos no noklusējuma HTML veidlapas uzvedības, pēc tam uzrakstīšu if paziņojumu, lai pārbaudītu, vai rezultāts ir vienāds ar vai mazāks par pieciem un vai komentārā ir mazāk par 10 rakstzīmēm. Ja tas tā ir, es parādīšu brīdinājumu, lai informētu lietotāju par prasību un atgrieztos no funkcijas.

const handleSubmit = (e) = {
  e.preventDefault();
  if (Number(score) <= 5 && comment.length <= 10) {
    alert("Lūdzu sniedziet komentāru par to, kāda bija Jūsu pieredze mūsu uzņēmumā");
    return;
  }
  console.log("Forma nosūtīta");
}

Pretējā gadījumā lietotājs ir iesniedzis atsauksmi, un es pieteikšu ziņojumu, lai apstiprinātu veiksmīgu atsauksmes iesniegšanu.

Laba prakse ir arī atiestatīt veidlapas vērtības pēc iesniegšanas. Es iestatīšu abām stāvokļa daļām to sākotnējās vērtības. Un šāds sanāk pats gala rezultāts:

Lūdzu. Viss darbojas labi, un iesniegšanas ziņojums ir pieteicies konsolē.

Jūs esat iemācījies izveidot atsauksmju veidlapu, izmantojot React, izmantojot kontrolētus komponentus un pielāgotu validāciju, lai nodrošinātu lietotājiem nevainojamu pieredzi.

Pilns aplikācijas kods:

import React, { useState } from 'react';
import "./App.css";


function App() {
  const [score, setScore] = useState(10);
  const [comment, setComment] = useState("");


  const handleSubmit = (e) => {
    e.preventDefault();
    if (score <= 5 && comment.length <= 10) {
      alert("Lūdzu sniedziet komentāru par to, kāda bija Jūsu pieredze mūsu uzņēmumā");
      return;
    }
    console.log("Forma nosūtīta!");
    setComment("");
    setScore(10);
  }


  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <fieldset>
          <h2>Atsauksmes forma</h2>
          <div className="Field">
            <label>Novērtējums:<br />
              {score}⭐</label>
            <input
              type="range"
              min="0"
              max="10"
              value={score}
              onChange={e => setScore(e.target.valueAsNumber)} />
          </div>
          <div className="Field">
            <label>Komentārs:</label><br />
            <textarea value={comment} onChange={e => setComment(e.target.value)} />
          </div>
          <button type="submit">Nosūtīt atsauksmi</button>
        </fieldset>
      </form>
    </div>
  );
}


export default App;