Reagir forma com o evento

Esta seção irá discutir como usar as formas de reagir.

É um exemplo de um simples

No exemplo que definir o valor dovalor de entrada caixa de entrada = {} this.state.data.Quando o valor da caixa de entrada muda, podemos atualizar o estado. Podemos usar o eventoonChange para escutar as mudanças na entrada e modificar o 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')
);

tente »

O código acima irá processar um valor de Olá w3big! Elemento de entrada, e atualizada em resposta a entrada do usuário valores de evento onChange.

exemplo 2

No exemplo a seguir vou mostrar-lhe como usá-lo na forma na submontagem. MétodoonChange aciona uma atualização e atualizar valor de estado é transmitida para a caixa de entrada de sub-montagem do interface de renderização re-valorpara cima.

Você precisa do seu componente pai é transmitido para a sub-montagem, criando um manipulador de eventos(handleChange), e como um suporte(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')
);

tente »

reagir evento

Os seguintes exemplos demonstram para modificar os dados através do evento onClick:

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

tente »

Quando você precisa para atualizar oestado do componente pai sub-montagem, você precisa componente pai criando um manipulador de eventos (handleChange),e entregue à sua submontagem comoprop(updateStateProp). Exemplos são os seguintes:

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

tente »