Javascript react中单个按钮上的两个事件

我正在尝试创建一个按钮，它可以在一个按钮上有两个事件，这样我就可以添加和删除一个标记，我可以用jquery来做，但不能在react中完成

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

var按钮=React.createClass({
getInitialState（）{
返回{
名称：“添加标记”
};
},
render:function（）{
返回{this.state.name}
},
onClick：功能（ev）{
//事件1
警报（“添加标记”）；
//事件2
警报（“移除标记”）；
this.setState（{name:'markert removed'}）
}
});

---

假设您想使用相同的按钮添加/删除标记，则可以执行以下操作：

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按钮=React.createClass({
getInitialState（）{
返回{
马克：错
};
},
onClick:function（）{
这是我的国家({
marker:！this.state.marker
});
},
render:function（）{
返回{this.state.marker？'addmarker'：'Remove marker'}
}
});

---

存储布尔值，并在单击按钮时更新该值。您可以基于该布尔值管理按钮文本。

您可以使用

事件.target访问元素，
如果将按钮的值设置为“添加”或“删除”，则可以通过event.target.value捕获它

例如

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>)
}

handleClick（事件）{
让actionType=event.target.value；//“添加”或“删除”，现在您可以使用开关大小写或常规if控制流*/
}
render（）{
返回（{name}）
}