React


イベント処理


5.1 イベントハンドラの登録

<button className="btn btn-save" onClick={this.handleSaveClicked}>保存</button>

※タッチイベントを利用する場合は手動で有効にする必要がある

React.initializeTouchEvents(true);

5.2 イベント と state

render メソッド

var SurveyEditor = React.createClass({
  render: function(){
    return (
      <div className='survey-editor'>
        <div className="row">
          <aside className='sidebar col-md-3'>
            <h2>サーベイの部品</h2>
            <DragableQuestions />
          </aside>

          <div className='survey-canvas col-md-9'>
            <div
              className={'drop-zone well well-drop-zone'}
              onDragOver={this.handleDragOver}
              onDragEnter={this.handleDragEnter}
              onDragLeave={this.handleDragLeave}
              onDrop={this.handleDrop}
            >
              左側の部品をドラッグアンドドrプしてください
            </div>
          </div>
        </div>
      </div>
    );
  }
});

5.2.1 render メソッド内で state を参照する

ハンドラメソッドが行う仕事は、今までに追加された質問のリストを更新することで、 そのために state を使用します

state オブジェクトの初期値は null ですが、 通常 getInitilaState メソッドで、 state の初期値を定義します

これによってコンポーネントのインスタンス作成時に state の初期値がセットされます

getInitialState: function(){
  return (
    dropZoneEntered: false,
    title: '',
    introduction: '',
    questions:[]
  );
}

render メソッドの中で this.state を参照することで現在の値をユーザーに表示するようにします

  render: function(){
    var questions = this.state.questions;
    var dropZoneEntered = '';
    if (this.dropZoneented) {
      dropZoneEntered = 'drag-enter';
    }
    return (
      <div className='survey-editor'>
        <div className="row">
          <aside className='sidebar col-md-3'>
            <h2>サーベイの部品</h2>
            <DragableQuestions />
          </aside>
          <div className='survey-canvas col-md-9'>
            <SurveyForm
              title={this.state.title}
              introduction={this.state.introduction}
              onChange={this.handleFormChange}
            />
            <Divider>質問</Divider>
            <ReactCSSTransitionGroup transitionName='question'>
              {questions}
            </ReactCSSTransitionGroup>
<div className={'drop-zone well well-drop-zone'} onDragOver={this.handleDragOver} onDragEnter={this.handleDragEnter} onDragLeave={this.handleDragLeave} onDrop={this.handleDrop} > 左側の部品をドラッグアンドドrプしてください </div> <div className='actions'> <button className="btn btn-save" onClick={this.handleSaveClicked}>保存</button> </div> </div> </div> </div> ); }

5.2.2 state の更新

getInitialState: function(){
  return (
    dropZoneEntered: false,
    title: 'すばらしいサーベイ',
    introduction: 'このサーベイはすばらしい',
    questions:[]
  );
}

上記で初期化されたものをこの後で

this.setState({title:'すばらしいタイトル2.0'});
// this.state.title のみ変更される
this.replaceState({title:'すばらしいタイトル2.0'});
//この場合は、state全体が入れ替わり、title以外のstateは消えてしまう
//そのためにrenderメソッドは壊れてしまう

一連のハンドラメソッドを記述していきます

handleFormChange: function(formData){
  this.setState(formData);
},
handleDragOver: function(ev){
  //handleDropが呼び出されるために必要
  ev.preventDefault();
},
handleDragEnter: function(){
  this.setState({dropZoneEntered:true});
},
handleDragLeave: function(){
  this.setState({dropZoneEntered:false});
},
handleDrop:function(ev){
  var questionType = ev.dataTransfer.getData('questionType');
  var questions = this.state.questions;
  questions = questions.concat({type:questionType});
  this.setSate({
    questions:questions,
    dropZoneEntered:false
  });
}

5.3 イベントオブジェクト

多くの場合は、イベントハンドラの引数は不要

時にはユーザーの入力情報が必要な場合がある

var AnswerEssayQuestion = React.createClass({
  handleComplete: function(event){
    this.callMethodOnProps('onCompleted', event.target.value );
  },
  render: function(){
    return (
      <div className='form-group'>
        <label className='survey-item-label'>{this.props.label}</label>
        <div className='survey-item-content'>
          <textarea className='form-control'
            rows='3' onBlur={this.handleComplete}></textarea>
        </div>
      </div>
    );
  }
});

React のイベントハンドラには必ずイベントオブジェクトが渡される

上記の handleComplete メソッドは、 イベントオブジェクト event.target.value を参照することで <textarea>要素の値を取得しています

このような event.target.value フォームの入力を取得するコードは onChange イベントハンドラでよく使われる