Sisendite töötlemine Reactis

Sisendite töötlemine Reactis toimub olekute abil. Iga sisendile määratakse oma olek, mis sisaldab sisendi value väärtust.

Vaatame näidet. Oletame, et meil on sisend:

jsxfunction App() {
  return <div>
    <input />
  </div>;
}

Oletame ka, et meil on olek:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input />
  </div>;
}

Seostame oma oleku sisendi atribuudiga value:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input value={value} />
  </div>;
}

Sellisel juhul saab tulemuseks, et oleku muutumisel muutub reaktiivselt ka sisendi tekst.

See annab aga huvitava kõrvalefekti: nüüd on koodi brauseris käivitades sisendis võimatu teksti muuta! Miks: sellepärast, et teksti sisestamisel sisendisse ei muutu olek value, vastavalt sellele ei peaks sisendi tekst muutuma.

Proovige ise. Kopeerige minu kood ja käivitage ise. Proovige sisendi teksti muuta - teil ei õnnestu. Avage brauseri konsool - näete seal Reacti hoiatus. See hoiatus näitab meile, et oleme seostanud oleku sisendiga, kuid sellega blokeerinud sisendi.

Teeme nii, et meie sisendisse saaks teksti sisestada. Selleks tuleb teha nii, et sisestamisel muutuks meie olek sisendi praegusele väärtusele.

Selleks tuleb kõigepealt sisendile lisada sündmus onChange:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

See sündmus Reactis käitub teisiti võrreldes puhta JS-iga. Reactis see töötab kohe sisendi muutumisel. See tähendab sümboli sisestamisel või kustutamisel.

Lisame nüüd oma sündmuse töötleja:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange() {
    
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Selles töötlejas peame lugema sisendi praeguse teksti ja seadma selle olekusse funktsiooni abil setValue.

Probleem on selles, et selle funktsiooni this ei osuta meie sisendile - see on Reacti eripära. Elemendi saamiseks, milles sündmus toimus, peame kasutama event.target:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target); // viide sisendi DOM elemendile
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Väljastame event.target abil sisendi praeguse teksti:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target.value); // sisendi praegune tekst
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Ja nüüd paneme sisendi teksti oma olekusse:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Nüüd saame sisestada teksti sisendisse. Sel juhul sisaldab olek value alati sisendi praegust teksti.

Saame selles kergesti veenduda. Väljastame oma teksti sisu lõigu sisse. Sel juhul teksti sisestamisel sisendisse ilmub sisestatud tekst automaatselt lõigus:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  function handleChange(event) {
    setValue(event.target.value);
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
    <p>text: {value}</p>
  </div>;
}

Saame kirjutada kompaktsemalt anonüümse noolfunktsiooniga:

jsxfunction App() {
  const [value, setValue] = useState('');
  
  return <div>
    <input value={value} onChange={event => setValue(event.target.value)} />
    <p>text: {value}</p>
  </div>;
}

Seega on iga sisendi töötamiseks meil vaja järgmist: luua selle jaoks olek, seostada olek sisendi atribuudiga value, lisada sündmus onChange sisendile, sündmuse töötlejas muuta sisendi olek selle teksti peale.

Neid toiminguid tuleb teha iga sisendiga. See tähendab, kui teil on kaks sisendit, siis on teil kaks olekut ja kaks sündmuse onChange töötlejat.