React onChange metodu

Giriş
Eğer Typescript kullanıyorsak onChange() metoduna React.FormEvent<HtmlInputElement> geldiğini görürüz. Generic template parametresi html bileşenine göre değişebilir.

name Alanı
Html bileşenine verilen name attribute ile kendi state bileşenimdeki alanın aynı olması iyi olur. Örneği <input name="a" ... > ise state bileşinimde de a isimli bir alan olması gibi.

Örnek
Şöyle yaparız

onChange = (event) => {
  this.setState({name: event.target.value});
}

Örnek
Elimizde iki tane alan olsun. Hangisi değişirse onChange metodumuzu çağırmak isteyelim. render metodunda şöyle yaparız.

render() {
  return (
    <div>

      <form className="App" onSubmit={this.onSubmit}>
        <input name="term" value={this.state.term} onChange={this.onChange}/>
        <input name="name" value={this.state.name} onChange={this.onChange}/>
        <button>Submit</button>
      </form>

      <pre>{JSON.stringify(this.state.items)}</pre>

    </div>
  );
}

onChange metodu şöyledir. name attribute ile input'un ismini alırız. value ile de değerini.

onChange = (event) => {
  const { name, value } = event.target;
  this.setState({ [name]: value });

}

Elimizdeki state şöyle olsun. setState metodunda name : xxxs yerine [name] : xxx kullanırız.

constructor(props) {
  super(props);

  this.state = {
    term: '',
    name: '',
    items: []
  };
}

value Alanı
Örnek ver