【メモアプリ】React.js LIST表示を管理するcomponentを作成

LIST表示を管理するComponent作成

LIST表示のみの機能を受け持つcomponentを作成する。また、動的にLISTの要素が増えるインターフェースを設ける。

InputMultiLine.js

{/*
    ・propsで指定した数分、複数の入力項目を表示すること。
    ・末尾の入力項目には、項目を追加するインターフェースを設けること。
*/}
window.React = require('react');
var React = require('react/addons');
var InputLine = require('./InputLine.js');
var CurrentTime = require('./CurrentTime.js');

var InputMultiLines = React.createClass({
    propTypes:{
        allowLines: React.PropTypes.number.isRequired
    },
    getInitialState: function(){
        return{
            allowLines: this.props.allowLines
        }
    },
    handleAdd: function(event){
        this.setState({allowLines: this.state.allowLines+1});
    },
    renderLine: function(number){
        var lines = [];
        for(var i=0; i < number; i++){
            if(i+1 == number){
                lines.push(<InputLine num={i+1} addLine={this.handleAdd}></InputLine>);
            }else{
                lines.push(<InputLine num={i+1}></InputLine>);
            }
        }
        return lines;
    },
    render: function(){
        return <div>{this.renderLine(this.state.allowLines)}</div>
    }
});

module.exports = InputMultiLines;

初期表示する箇条書きの入力項目数の指定

以下の様に、propsを使用して、初期表示するLSIT要素数を親から指定できるように
インターフェースを設ける。以下では、初期表示の数として、propsにて
allowLinesの要素数を指定できるようにする。初期表示以降、動的に変更される値については、
stateにて状態として管理するため、stateのallowLinesにpropsのallowLinesの値をセットしている。

propTypes:{
　　　　allowLines: React.PropTypes.number.isRequired
},
getInitialState: function(){
　　　　return{
　　　　　　　　allowLines: this.props.allowLines
　　　　}
},

動的に箇条書きの項目数を追加

handleAddにてList表示する要素数をsetStateを使用して変更することで、再renderされ、LISTの要素数が１つ追加される。

　　　　handleAdd: function(event){
　　　　　　　　this.setState({allowLines: this.state.allowLines+1});
　　　　},

LIST要素の末尾の項目のみhandleAddをpropsとして子に渡すことで、
末尾の項目に何らかのアクションがあった場合に、
子にて受け渡したhandleAddを実行して、LISTの要素を追加する。

　　　　renderLine: function(number){
　　　　　　　　var lines = [];
　　　　　　　　for(var i=0; i < number; i++){
　　　　　　　　　　　　if(i+1 == number){
　　　　　　　　　　　　　　　　lines.push();
　　　　　　　　　　　　}else{
　　　　　　　　　　　　　　　　lines.push();
　　　　　　　　　　　　}
　　　　　　　　}
　　　　　　　　return lines;
　　　　},
　　　　render: function(){
　　　　　　　　return

{this.renderLine(this.state.allowLines)}

　　　　}

例えば、今回は、TABキーが押下された場合に子に受け渡したaddLineが実行されLIST要素を
追加する様にした。
以下は、子側で実装したfunctionとなり、9は、TABのキーコードである。
もちろん、末尾以外のLISTのINPUT項目には、addLineがpropsで受け渡されていないため、
大外の条件にマッチしない。

   keydown: function(e){
       if(this.props.addLine!==undefined){
           if((e.which && e.which === 9) || (e.keyCode && e.keyCode === 9)){
               this.props.addLine();
           }
       }
   }