ReactJS - Formulare

In diesem Kapitel erfahren Sie, wie Sie Formulare in React verwenden.

Einfaches Beispiel

Im folgenden Beispiel legen wir ein Eingabeformular mit fest value = {this.state.data}. Dadurch kann der Status aktualisiert werden, wenn sich der Eingabewert ändert. Wir benutzenonChange Ereignis, das die Eingabeänderungen überwacht und den Status entsprechend aktualisiert.

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'));

Wenn sich der eingegebene Textwert ändert, wird der Status aktualisiert.

Komplexes Beispiel

Im folgenden Beispiel wird gezeigt, wie Formulare aus untergeordneten Komponenten verwendet werden. onChange Die Methode löst eine Statusaktualisierung aus, die an die untergeordnete Eingabe übergeben wird valueund auf dem Bildschirm gerendert. Ein ähnliches Beispiel wird im Kapitel Ereignisse verwendet. Wann immer wir den Status von der untergeordneten Komponente aktualisieren müssen, müssen wir die Funktion übergeben, die die Aktualisierung übernimmt (updateState) als Requisite (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'));

Dies führt zu folgendem Ergebnis.