Darbība ar input elementiem React

Darbība ar input elementiem React notiek ar stāvokļu palīdzību. Katram input elementam tiek piešķirts savs stāvoklis, kas satur input elementa value.

Apskatīsim piemērā. Pieņemsim, ka mums ir input elements:

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

Pieņemsim arī, ka mums ir stāvoklis:

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

Piesēsim mūsu stāvokli pie input elementa value atribūta:

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

Šajā gadījumā izrādīsies, ka mainoties stāvoklim, reaktīvi mainīsies arī input elementa teksts.

Tomēr tas rada interesantu blakusefektu: tagad, palaižot kodu pārlūkprogrammā, input elementā nav iespējams mainīt tekstu! Kāpēc: tāpēc ka, ievadot tekstu input elementā, nemainās stāvoklis value, attiecīgi, teksts input elementā nevajadzētu mainīties.

Izmēģiniet pats. Nokopējiet manu kodu un palaidiet sevim. Mēģiniet mainīt tekstu input elementā - jums nekas neizdosies. Atveriet pārlūkprogrammas konsole - jūs tajā redzēsiet brīdinājumu no React. Šis brīdinājums norāda mums, ka mēs esam piesaistījuši stāvokli input elementam, bet tādējādi esam bloķējuši input elementu.

Padarīsim tā, lai mūsu input elementā varētu ievadīt tekstu. Lai to izdarītu, ir jāpanāk, lai, ievadot, mūsu stāvoklis mainītos uz input elementa pašreizējo vērtību.

Vispirms tam ir jāpievieno input elementam notikums onChange:

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

Šis notikums React uzvedas citādi salīdzinājumā ar tīro JS. React tas iedarbojas tūlīt pēc input elementa izmaiņām. Tas ir, ievadot vai dzēšot simbolu.

Tagad pievienosim mūsu notikuma apstrādātāju:

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

Šajā apstrādātājā mums ir jānolasa pašreizējais input elementa teksts un jāiestata tas stāvoklī, izmantojot funkciju setValue.

Problēma ir tā, ka this šajā funkcijā nerādīs uz mūsu input elementu - tāda ir React īpatnība. Lai iegūtu elementu, kurā notika notikums, mums ir jāizmanto event.target:

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

Izvadīsim ar event.target palīdzību pašreizējo input elementa tekstu:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target.value); // pašreizējais input elementa teksts
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Un tagad ierakstīsim input elementa tekstu mūsu stāvoklī:

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

Tagad mēs varēsim ievadīt tekstu input elementā. Šajā gadījumā stāvoklis value vienmēr saturēs input elementa pašreizējo tekstu.

Mēs to varam viegli pārbaudīt. Izvadīsim mūsu teksta saturu rindkopā. Šajā gadījumā, ievadot tekstu input elementā, ievadītais teksts automātiski parādīsies rindkopā:

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>;
}

Varam pārrakstīt uz kompaktāku variantu ar anonīmu bultiņu funkciju:

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

Tādējādi, lai jebkurš input elements darbotos, mums vajag sekojošo: izveidot stāvokli šim input elementam, piesaistīt stāvokli input elementa value atribūtam, pievienot notikumu onChange input elementam, notikuma apstrādātājā mainīt input elementa stāvokli uz tā tekstu.

Šīs darbības būs jāveic ar katru input elementu. Tas ir, ja jums ir divi input elementi, tad jums būs divi stāvokļi un divas notikuma onChange apstrādātāja funkcijas.