ReactJS-Tabelle

In diesem Kapitel lernen wir, wie man in React Formulare verwendet.

Einfaches Beispiel

Im folgenden Beispiel verwenden wir ein Einstellungsformularvalue = {this.state.data}Solange sich der Eingabewert ändert, kann der Zustand aktualisiert werden. Wir verwendenonChangeEreignisse, die den Input-Änderungen überwachen und den Zustand entsprechend aktualisieren.

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 Textwert des Eingabefelds ändert, wird der Zustand aktualisiert.

Komplexes Beispiel

Im folgenden Beispiel sehen wir, wie wir ein Formular in einem Kind-Komponenten verwenden.onChangeausführt, um den Zustandsupdate auszulösen, der dann an den Kind-Eingabekomponenten weitergegeben wirdvalueund auf dem Bildschirm angezeigt. Ein ähnliches Beispiel wird im Kapitel "Ereignisse" verwendet. Jedes Mal, wenn wir den Zustand eines Kind-Komponenten aktualisieren müssen, müssen wir die Funktion, die updateupdateState） als prop （updateStateProp） übergeben。

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 wird das folgende Ergebnis erzeugen.