React JS İle Input Alanının Değerini Almak

Bu yazımızda react js içerisinde bir input etiketine girilen değeri almayı göreceğiz. Input alanındaki değeri almak bizim için önemlidir. Bu yazıyı tam olarak değerlendirebilmek için state kullanımını bilmek gerekiyor.

Bu işlemi yapmak için

• Önce state üzerinde bir değişken oluşturuyoruz.
• Input üzerinde onChange eventi oluşturuyoruz.
• event.target.value değerini alıp state ekliyoruz.

Şimdi bir örnek uygulama yapalım.

import {useState} from 'react';

function App() {
  const [message, setMessage] = useState('');

  const handleChange = event => {
    setMessage(event.target.value);

    console.log('Input değeri : ', event.target.value);
  };

  return (
    <div>
      <input
        type="text"
        id="message"
        name="message"
        onChange={handleChange}
        value={message}
      />

      <h2>Mesaj: {message}</h2>
    </div>
  );
};

export default App;

Şimdi yazdıklarımızı inceleyelim. İlk olarak

const [message, setMessage] = useState('');

şeklinde message adında bir değişkeni ve onu düzenlemek için setMessage fonksiyonunu oluşturuyoruz.

Sonra

  const handleChange = (event) => {
    setMessage(event.target.value);

    console.log('Input değeri : ', event.target.value);
};

f

onksiyonu yazıyoruz. Bu fonkisyon ile input üzerindeki değer değiştiğinde onChange eventi ile çağırdığırıyoruz.

Ve ayrıca şimdi input etiketini inceleyelim.

    <input
    type="text"
    id="message"
    name="message"
    onChange={handleChange}
    value={message}
    />

Input üzerindeki iki alan bizim için önemlidir.

• onChange={handleChange} ile input üzerinde bir değişiklik olduğunda handleChange fonksiyonunu çağırıyoruz. Fonksiyon çağrıldığında onChange eventini tanımlayan bir değişken bu fonksiyona atanacaktır.
• value={message} input değerini state üzerinde tanımladığımız message değişkenine eşitliyoruz.

Şimdi adım adım yaptığımız işlemi inceleyelim.

• İlk olarak input üzerinde bir değişiklik olduğunda, yani bir yazı yazdığımızda onChange eventi tetiklenir.
• Ve bu sayesinde handleChange fonksiyonucu çağırıyoruz ve bu fonksiyonua event bilgisini geçiyoruz.
• hanleChange fonksiyonuda evet parametresi ile eventi yakalıyoruz.
• event değişkenini yakaladıktan sonra event.target.value olarak input içerisindeki değeri yakalıyoruz.
• setMessage(event.target.value); ile de yakaladığımız bu değeri state üzerinde tanımladığımız message değişkenine atıyoruz.
• message değişkeni değiştiği için input değerini de value={message} kodu ile inputa atıyoruz.

Sonuç

React içerisinde input içerisindeki değeri almak için event.target.value değerini kullanıyoruz. Sonrasında aldığımız değeri istediğimiz gibi kullanabiliyoruz.

React state kullanımı ile ilgili deneyimlerinizi bizimle paylaşır mısınız?