21 Haziran 2019 Cuma

React Form Bileşeni

onsSubmit metodu
Örnek
Şöyle yaparız.
//Arrow function used to bind the necessary variables
CallFunction = (event) =>{ 
   console.log("Event was called");
}

render(){
   return(
      <form onSubmit={this.CallFunction} />
   );
}
Örnek
Elimizde şöyle bir state olsun
constructor(props) {
    super(props);

    this.state = {
      term: '',
      name: '',
      items: []
    };
  }
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>
    );
  }
onsubmit metodunda şöyle yaparız.
 onSubmit = (event) => {
    event.preventDefault();

    this.setState({
      term: '',
      name: '',
      items: [
        ...this.state.items,
        this.state.term,
        this.state.name
      ]
    });

  }

Hiç yorum yok:

Yorum Gönder