React’te Form Öğeleriyle Nasıl Çalışılır?

React’te form öğeleriyle çalışmak, diğer HTML öğeleriyle aynı şekilde gerçekleştirilir. Ancak, React, form öğeleriyle ilişkili olayları yönetmek için özel bir syntax sunar. İşte React’te form öğeleriyle çalışmak için izlenebilecek adımlar:

Form Elemanlarının Tanımlanması:

Form elemanları, React bileşenlerinin JSX içinde tanımlanabilir. Örneğin, aşağıdaki kod örneğinde bir input elemanı tanımlanmaktadır:

python

<input type=”text” name=”username” />

Form Elemanlarının State İle Bağlanması:

Form elemanlarındaki değerlerin tutulması için state kullanılabilir. Örneğin, yukarıdaki input öğesi şöyle tanımlanabilir:

kotlin

<input type=”text” name=”username” value={this.state.username} onChange={this.handleUsernameChange} />

Burada, input öğesi, this.state.username adlı bir state öğesiyle bağlanmaktadır. onChange olayı, input değeri her değiştiğinde çalışacak bir işlevi çağırmaktadır.

Olay İşleyicilerinin Tanımlanması:

React, form elemanlarındaki değişiklikleri yönetmek için onChange, onSubmit vb. olay işleyicilerini kullanır. Örneğin, yukarıdaki kod örneğinde handleUsernameChange adlı bir olay işleyicisi tanımlanabilir:

javascript

handleUsernameChange = (event) => {

  this.setState({ username: event.target.value });

}

Burada, olay işleyicisi, input öğesi değiştiğinde çalışacak ve this.state.username adlı state öğesinin değerini güncelleyecektir.

Form Verilerinin Gönderilmesi:

Form verileri, onSubmit olayı tetiklendiğinde sunucuya gönderilir. onSubmit olayı, bir form elemanının ana bileşeninde tanımlanır. Örneğin:

javascript

render() {
  return (
    <form onSubmit={this.handleSubmit}>
      // form elemanları burada tanımlanır
    </form>
  );