反応中の単一のボタンに2つのイベント

Question

私はマーカーを追加したり削除したりできるように、2つのイベントを1つのボタンに作成できるボタンを作成しようとしています。jqueryで行うことはできますが、反応する。

var Button = React.createClass({ 
    getInitialState() { 
     return { 
     marker: false 
     }; 
    }, 
    onClick: function() { 
     this.setState({ 
      marker: !this.state.marker 
     }); 
    }, 
    render: function() { 
     return <button type="button" onClick={this.onClick}>{this.state.marker ? 'Add marker' : 'Remove marker'}</button> 
    } 
}); 

ストアブール値や更新をするときこと：あなたは、あなたがこのような何かを行うことができ、マーカーを追加/削除するには、同じボタンを使用すると仮定すると、

var Button = React.createClass({ 
    getInitialState() { 
     return { 
      name: 'add marker' 
     }; 
    }, 
    render: function() { 
     return <button type="button" onClick={this.onClick}>{this.state.name}</button> 
    }, 

    onClick: function(ev) { 
    // event 1 
     alert('marker added'); 

    // event 2 
     alert('remove marker'); 
     this.setState({name:'markert removed'}) 
    } 
}); 

http://jsfiddle.net/zidski/5z3f7zL4/1/

Answer 1

ボタンをクリックします。そのブール値に基づいてボタンのテキストを管理することができます。

Answer 2

あなたは「追加」または「削除」あなたは元のためevent.target.value

経由でキャプチャできるようなものに、ボタンの値を設定するならば、あなたは、event.targetを持つ要素に にアクセスすることができます。

handleClick(event) { 
    let actionType = event.target.value; // 'add' or 'remove', now you can control the flow with switch case or regular if's */ 
} 
render(){ 
    return (<button value='add' onClick={this.handleClick}>{name}</button>) 
}