React ile bir küçük bir form login form yapalım:

Öncelikle React ve useState import edelim.

import React, {useState} from "react";

App'imizde bir heading (Form başlığı), bir input (isim girmek için) ve bir tane de buton olacak( veriyi göndermek için: submit).

function App() {
 return (
    <div className="container">
      <h1>Hello </h1>
      <form >
        <input
          type="text"
          placeholder="What's your name?
        />
        <button type="submit" className="btn">Submit </button>
      </form>
    </div>
}

Şimdi Heading "Hello" değerine sahip.

Forma herhangi bir isim girilip Submit butonuna basıldığında buraya yazılan değer ile beraber "Hello + İsim" şeklinde çalışmasını istiyoruz.

Burada bu işlemleri yapmak ve durumları takip etmek için useState kullanacağız. Bu konuyu bilmiyorsanız öncelikle biraz bu konu ile ilgili bilgi edinmeniz faydalı olacaktır.

Girilen ismi takip etmek için kullanacağımız hook şu şekilde olabilir:

name için başlangıç değeri boş bir string.

const [name, setName] = useState("");

Aynı şekilde heading textinin takip etmek için ise şu şekilde bir hook kullanalım:

headingText için başlangıç değeri boş bir string.

const [headingText, setHeading] = useState("");

Bizim fonksiyonumuzda headingText değeri name değerine bağlı olarak değişecektir.

Öncelikle name değerini takip etmek için bir fonksiyon yazalım. İsmine handleChange diyebiliriz. Bu fonkisyonumuz herhangi bir değişiklik olduğunda, yani bir şey yazıldığında yazılan değeri tutacaktır.

Herhangi bir değişiklik olduğunda bir event aktif olacak ve biz bu eventin değerini tutabiliriz ve name değerinin buna eşitlenmesi için useState kullanabiliriz.

function handleChange(event) {
setName(event.target.value);
}

Burada yapmak istediğimiz ise yazıldığı anda değil de biz butona bastığımız anda heading değerinin değişmesi. Dolayısıyla bu fonksiyondaki name değerini butona bastığımızda çalışan fonksiyonda kullanarak ilgili alanı güncellememiz gerekmektedir.

Bunun için aşağıdaki şekilde bir fonksiyon yazabiliriz:

function handleSubmit(event) {
setHeading(name);
}

Form özelliği olarak bir submit yapıldığında form yenileniyor ve biz sonucu göremiyoruz. Bunu engellemek için ise fonksiyonun sonuna aşağıdaki satır eklenebilir:

event.preventDefault();

Bu fonksiyonumuz ise butona basıldığı anda input alanında name olarak takip edilen değerin alıp headingText değişkenine atamaktadır.

Şimdi bu fonksiyonları App fonksiyonunda ilgili alanlara {} içine yazarak belirlenen olaylar gerçekleştiğinde çalışmalarını sağlayacağız.

 <h1>Hello {headingText} </h1>    
// headingText Değeri "name" değişkeninin son haline eşit olacaktır.
<form onSubmit={handleSubmit}>
<input 
type="text"
placeholder="What's your name?"
onChange={handleChange}
value={name} 
/>          
<button type="submit" className="btn">Submit </button>
</form>

Şimdi bütün bunları bir araya getirirsek App fonksiyonumuzun son hali aşağıdaki gibi olacaktır:

//jshint esversion:6
import React, { useState } from "react";
function App() {
  const [name, setName] = useState("");
  const [headingText, setHeading] = useState("");

  function handleSubmit(event) {
    event.preventDefault();    
    setHeading(name);
  }
  function handleChange(event) {
    setName(event.target.value);
  }
  return (
    <div className="container">
      <h1>Hello {headingText} </h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="What's your name?"
          onChange={handleChange}
          value={name}
        />
        <button type="submit" className="btn"> Submit </button>
      </form>
    </div>
  );
}
export default App;

Tabi bundan sonrasında bunu tarayıcı üzerinde görmek için gerekli olan .html ve görünüşünü ayarladığımız .css dosyaları vardır.

Bu şekilde son haline aşağıdaki linkten ulaşabilrisiniz.

https://github.com/yusufcnr/100Days-Code-LW3/tree/main/React/react-forms

Teşekkürler.

https://twitter.com/yc_crypto