Reagieren Form mit der Veranstaltung

In diesem Abschnitt wird erläutert, wie die Formulare zu verwenden, in React.

Es ist ein Beispiel eines einfachen

Im Beispiel setzen wir den Wert des EingabefeldesEingabewert = {this.state.data}.Wenn das Eingabefeld ein Wert ändert können wir den Zustand zu aktualisieren. Wir können dieonChange Ereignis verwenden , um Änderungen in der Eingabe zu hören und den Zustand zu ändern.

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello w3big!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <input type="text" value={value} onChange={this.handleChange} /> 
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

Versuchen »

Der obige Code wird einen Wert von Hallo w3big! Eingangselement machen, und in Reaktion auf Benutzereingaben aktualisierten Werte onChange Ereignis.

Beispiel 2

Im folgenden Beispiel zeige ich Ihnen, wie es in der Form auf der Baugruppe zu verwenden.onChange Methode löst eine Aktualisierung und aktualisieren Zustandswert an das Eingabefeld übertragen wird Unterbaugruppe des Wertesnach oben Wieder Rendering - Schnittstelle.

Sie benötigen eine übergeordnete Komponente zu der Unterbaugruppe durch die Schaffung eines Event - Handler(handleChange) und als Stütze(updateStateProp) übertragen wird.

var Content = React.createClass({
  render: function() {
    return  <div>
            <input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp} /> 
            <h4>{this.props.myDataProp}</h4>
            </div>;
  }
});
var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello w3big!'};
  },
  handleChange: function(event) {
    this.setState({value: event.target.value});
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

Versuchen »

reagieren Ereignis

Die folgenden Beispiele zeigen die Daten über das OnClick-Ereignis zu ändern:

var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello w3big!'};
  },
  handleChange: function(event) {
    this.setState({value: '本教程'})
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <button onClick={this.handleChange}>点我</button>
            <h4>{value}</h4>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

Versuchen »

Wenn Sie denZustand von der übergeordneten Komponente Unterbaugruppe aktualisieren müssen, müssen Sie übergeordnete Komponente durch einen Event - Handler (handleChange)zu schaffen und zu Ihrer Baugruppe alsStütze(updateStateProp) geliefert. Beispiele sind wie folgt:

var Content = React.createClass({
  render: function() {
    return  <div>
              <button onClick = {this.props.updateStateProp}>点我</button>
              <h4>{this.props.myDataProp}</h4>
           </div>
  }
});
var HelloMessage = React.createClass({
  getInitialState: function() {
    return {value: 'Hello w3big!'};
  },
  handleChange: function(event) {
    this.setState({value: '本教程'})
  },
  render: function() {
    var value = this.state.value;
    return <div>
            <Content myDataProp = {value} 
              updateStateProp = {this.handleChange}></Content>
           </div>;
  }
});
ReactDOM.render(
  <HelloMessage />,
  document.getElementById('example')
);

Versuchen »