React使用ノート(3)-React Event Listener

Date:2015-11-28 12:18 Category:Web Tags:JavaScript Author:劉理想
[toc]

1.基本構造の構築

まず、ボタンと入力ボックスを作成します.ボタンをクリックする準備をしていると、後ろに<span>が表示され、隠されています.コードは次のとおりです.

<div id="container"></div>
<script type="text/jsx">
    var TestClickComponent = React.createClass({
        render: function(){
            return (
                <div>
                    <button> | </button>
                    <span> </span>
                </div>
                );
        }
    });

    var TestInputComponent = React.createClass({
        getInitialState: function(){
            return {
                inputContent: ''
            }
        },
        render: function(){
            return (
                <div>
                    <input type="text" /><span>{this.state.inputContent}</span>
                </div>
                );
        }
    });

    React.render(
        <div>
            <TestClickComponent />
            <TestInputComponent />
        </div>,
        document.getElementById('container'));
</script>

ここでいくつか注意しなければならないことがあります.renderで戻るときは、<div>で包む必要があります.それぞれにhtmlラベルが何個も入っているからです.

2.<button>にイベントバインドを追加する

onClickなどのイベントをアルパカ式に命名してバインドします.ここでのonClickイベントは、オリジナルHTML属性のonclickとは別です.ここで、それは真実のDOMノードではなく、React Elementにすぎず、書き方も異なり、HTMLラベルの属性は大文字と小文字に敏感ではなく、React Elementは大文字と小文字に敏感である.onClickの処理関数は、一般に、Reactコンポーネントのオブジェクトインスタンスにオブジェクト属性によってカプセル化される.

var TestClickComponent = React.createClass({
    handleClick: function(event){
        
    },

    render: function(){
        return (
            <div>
                <button onClick={this.handleClick}> | </button>
                <span> </span>
            </div>
            );
    }
});

handleClick関数のパラメータは、Reactパッケージのeventオブジェクトである.このeventオブジェクトは、オリジナルjsのeventオブジェクトに基づいてカプセル化されているので、オリジナルjsのeventオブジェクト上のいくつかの方法を呼び出すことができます.

handleClick: function(event){
    event.stopPropagation();
    event.preventDefault();
}

eventイベント処理関数内で<span>をどのように処理するか、<span>にref属性を追加することで、this.refsでこのオブジェクトを取得できます.

<span ref="tip"> </span>

this.refs.tipを使用して参照したのは、実際のDOMノードではなく、Reactコンポーネントであることに注意してください.DOMノードを操作するにはどうすればいいですか?Reactを使用してカプセル化する方法React.findDOMNode、パラメータは私たちのReactコンポーネントです.

handleClick: function(event){
    var tipE = React.findDOMNode(this.refs.tip)

    if (tipE.style.display === 'none'){
        tipE.style.display = 'inline';
    } else {
        tipE.style.display = 'none';
    }
    event.stopPropagation();
    event.preventDefault();
}

3.<input>にイベントバインドを追加

<input>にonChangeイベントを追加します.ここではevent.target.valueを使用して<input>の値を取得し、stateを設定すると、対応する<span>の内容が変更されます.

changeHandler: function(event){
    this.setState({
        inputContent: event.target.value
    });
    event.preventDefault();
    event.stopPropagation();
},
render: function(){
    return (
        <div>
            <input type="text" onChange={this.changeHandler}/><span>{this.state.inputContent}</span>
        </div>
        );
}

作者:liulixiang 1988#gmail.com(#を@)参照リンク:http://www.imooc.com/learn/504