이벤트와 양식을 반응

이 섹션에서는 반작용의 양식을 사용하는 방법에 대해 설명합니다.

이 간단한 예이다

이 예에서는 입력 상자 입력값 this.state.data = {}의 값을 설정한다.입력 상자의 값이 변경되면 우리는 상태를 업데이트 할 수 있습니다. 우리는 입력의 변화를 수신하고 상태를 수정하는OnChange 이벤트를 사용할 수 있습니다.

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

»시도

위의 코드의 안녕 w3big! 입력 요소의 값을 렌더링, 및 사용자 입력에 응답하여 업데이트는 OnChange 이벤트 값.

예 2

다음 예에서 나는 어떻게 서브 어셈블리의 양식에서 사용하는 방법을 보여줍니다.onChange가 방법은 업데이트 트리거와 상태 값이 최대 값으로다시 렌더링 인터페이스를 입력 상자 서브 어셈블리로 전달된다 업데이트.

귀하는 부모 구성 요소가 이벤트 핸들러(handleChange)를 생성하여 서브 어셈블리에 전송해야하고,소품 (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')
);

»시도

이벤트 반응

다음 예 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')
);

»시도

상위 구성 요소의 서브 어셈블리의상태를 업데이트해야 할 때 이벤트 핸들러 (handleChange)를작성하여 부모 구성 요소에필요하고소품 (updateStateProp)로 서브 어셈블리에 전달했다. 다음 예는 다음과 같다 :

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

»시도