React-da Inputlar bilen işlemek

React-da inputlar bilen işlemek state-ler arkaly amala aşyrylýar. Her inputa özüniň value -ny saklaýan state bellenilýär.

Geliň mysal üçin seredeliň. Bizde input bolsun:

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

Şeýle hem bizde state bolsun:

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

Geliň inputyň value atly aýratynlygyna state baglaýalyň:

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

Şeýle ýagdaýda, state üýtgedilende, inputdaky tekst hem reaktiw üýtgeýär.

Emma bu gyzykly ýan tesiri hem ýüze çykarýar: indi brauzerde kody işledeniňizde, inputda tekst üýtgetmek mümkin däl! Näme üçin: sebäbi inputa tekst ýazylanyňyzda value state-i üýtgemeýär, şonuň üçin hem inputdaky tekst üýtgemeli däl.

Öziňiz synaň. Kody göçürip alyň we özüňizde işlediň. Inputda tekst üýtgetmäge synanyşyň - hiç zat bolmaz. Brauzeriň konsolyny açyň - ol ýerde React-yň duýduryşyny görersiňiz. Bu duýduryş bize state-i inputa baglap, şol bir wagtyň özünde inputy blokladymyzy görkezýär.

Geliň, bizim inputa tekst ýazmak mümkin bolşy ýaly edeliň. Munuň üçin tekstiň ýazylmagy bilen bize state-i inputyň häzirki bahasy bilen üýtgetmeli.

Başlangyç üçin, inputa onChange wakasyny ýüklemeli:

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

React-da bu waka arassa JS-den başgaça hereket edýär. React-da ol input üýtgeniň ýaly hem ýüze çykýar. Ýagni sim bolsa ýazylanda ýa-da aýrylanda.

Geliň indi waka işleýjimizi goşalyň:

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

Bu işleýjide biz inputyň häzirki tekstini okamaly we ony setValue funksiýasy arkaly state-e bellemeli.

Mesele şonda ýaýranýar, bu funksiýanyň this biziň inputymyza görkezmeýär - bu React-yň aýratynlygy. Waka bolan elementi almak üçin biz event.target ulanmaly:

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

event.target arkaly inputyň häzirki tekstini çykaryň:

jsxfunction App() {
  const [value, setValue] = useState('text');
  
  function handleChange(event) {
    console.log(event.target.value); // inputyň häzirki teksti
  }
  
  return <div>
    <input value={value} onChange={handleChange} />
  </div>;
}

Indi bolsa input tekstini biziň state-ä ýazalyň:

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

Indi biz inputa tekst ýaza bileris. Şol bir wagtda value state-i her wagt inputyň häzirki tekstini saklar.

Biz munuň üstüne aňsatlyk bilen ynanyp bileris. Tekstimiziň mazmunyny abzaç içinde çykaryň. Şeýle ýagdaýda, inputa tekst ýazylanyňyzda, ýazylyş teksti abzaçda awtomatiki ýüze çykar:

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

Anonim ok funksiýasy bilen has gysga wariantda ýaza bileris:

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

Şeýlelikde, islendik input bilen işlemek üçin bize aşakdakylar gerek: bu input üçin state döretmek, state-i inputyň value aýratynlygyna baglamak, inputa onChange wakasyny ýüklemek, waka işleýjisinde inputyň state-i onuň teksti bilen üýtgetmek.

Bu amallar her input bilen ýerine ýetirilmeli. Ýagni, eger siziň iki inputyňyz bolsa, onda siziň iki state-iňiz we iki onChange waka işleýji funksiýaňyz bolmaly.