ReactJS - Formlar

Bu bölümde, React'te formları nasıl kullanacağımızı öğreneceğiz.

Basit Örnek

Aşağıdaki örnekte, bir giriş formu ayarlayacağız value = {this.state.data}. Bu, giriş değeri her değiştiğinde durumu güncellemeye izin verir. KullanıyoruzonChange giriş değişikliklerini izleyecek ve durumu buna göre güncelleyecek olay.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <input type = "text" value = {this.state.data} 
               onChange = {this.updateState} />
            <h4>{this.state.data}</h4>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Giriş metni değeri değiştiğinde, durum güncellenecektir.

Karmaşık Örnek

Aşağıdaki örnekte, alt bileşenden formların nasıl kullanılacağını göreceğiz. onChange yöntem, alt girdiye geçirilecek durum güncellemesini tetikleyecek valueve ekranda işlenir. Olaylar bölümünde benzer bir örnek kullanılmıştır. Alt bileşenden durumu güncellememiz gerektiğinde, güncellemeyi işleyecek işlevi geçmemiz gerekir (updateState) destek olarak (updateStateProp).

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 'Initial data...'
      }
      this.updateState = this.updateState.bind(this);
   };
   updateState(e) {
      this.setState({data: e.target.value});
   }
   render() {
      return (
         <div>
            <Content myDataProp = {this.state.data} 
               updateStateProp = {this.updateState}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   render() {
      return (
         <div>
            <input type = "text" value = {this.props.myDataProp} 
               onChange = {this.props.updateStateProp} />
            <h3>{this.props.myDataProp}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

Bu, aşağıdaki sonucu verecektir.