Girdi değerlerini işlemek, React bileşenlerimizde sık sık yapmamız gereken bir şeydir.

Bu makalede, React kancalarıyla girdilerin nasıl ele alınacağına bakacağız.

useState Kancasını Kullanma

Bir girdinin değerini React bileşenimizde kullanılabilir hale getirmek için girdi değerini bir durumun değeri olarak ayarlamalıyız.

Bunu yapmak için useStatekancayı kullanabiliriz .

Örneğin şunu yazabiliriz:

import React from "react";
export default function App() {
  const [inputValue, setInputValue] = React.useState("");
  const onChangeHandler = (event) => {
    setInputValue(event.target.value);
  };
  return (
    <div>
      <input
        type="text"
        name="name"
        onChange={onChangeHandler}
        value={inputValue}
      />
      <p>{inputValue}</p>
    </div>
  );
}

Ardından durumu ayarlamak için çağıran parametre onChangeHandlerile fonksiyonu tanımlarız .eventsetInputValueinputValue

event.target.value giriş değerine sahiptir.

Ve sonra bir girdi öğesi ekleriz ve onChangeHandlerolay işleyicisini ve inputValuedurumu sırasıyla onChangeve valuesahne öğelerine iletiriz.

Sonra gösteriyoruz inputValue.

valueProp'u olarak ayarladık, inputValueböylece girdiye ne yazdığımızı göreceğiz.

Girişleri sık sık kullanırsak, giriş mantığını bir kancaya da koymak isteyebiliriz:

import React, { useState } from "react";
const useInput = ({ type }) => {
  const [value, setValue] = useState("");
  const input = (
    <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      type={type}
    />
  );
  return [value, input];
};
export default function App() {
  const [username, userInput] = useInput({ type: "text" });
  return (
    <div>
      {userInput}
      <p>{username}</p>
    </div>
  );
}

Sonra diyoruz useInputiçinde Appkullanmak.

Biz koymak userInputdiv ve bileşeni usernamegirdi değerine sahip.

Kanca, daha önce sahip olduğumuz aynı mantığa sahiptir.

Bu yüzden girdiye yazdığımızda girilen değeri görüyoruz.

Sonuç

Giriş değeriyle bir durum ayarlayıcı işlevi çağırarak giriş değerlerini işleyebiliriz, böylece giriş değerini bileşenimizde kullanabiliriz.