Reaccionar formulario con el evento

En esta sección se discutirá cómo usar las formas de reaccionar.

Es un ejemplo de un simple

En el ejemplo que damos el valor delvalor de entrada cuadro de entrada = {} this.state.data.Cuando el valor del cuadro de entrada cambia podamos actualizar el estado. Podemos utilizar el eventoonChange para escuchar los cambios en la entrada y modificar el estado.

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

Trate »

El código anterior hará que un valor de w3big Hola! Elemento de entrada, y actualizado en respuesta a la entrada del usuario valores de eventos onChange.

Ejemplo 2

En el ejemplo siguiente le mostraré cómo usarlo en forma en el subconjunto. MétodoonChange activa una actualización y actualizar valor de estado se transmite a la caja de entrada subconjunto de la re-renderizado interfaz de valorhacia arriba.

Es necesario que su componente principal es transmitida al subconjunto mediante la creación de un controlador de eventos(handleChange), y como un apoyo(updateStateProp).

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

Trate »

reaccionar evento

Los siguientes ejemplos demuestran para modificar los datos a través del evento de clic:

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

Trate »

Cuando tenga que actualizar elestado del componente principal subconjunto, es necesario componente de los padres mediante la creación de un controlador de eventos (handleChange),y entregado a su subconjunto comopuntal(updateStateProp). Ejemplos son los siguientes:

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

Trate »