javascript - react 中单个按钮上的两个事件

Question

我正在尝试创建一个按钮，它可以在一个按钮上有两个事件，以便我可以添加和删除标记，我可以使用 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'})
    }
});

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

Answer 1

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

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

存储 bool 值并在单击按钮时更新该值。您可以根据该 bool 值管理按钮文本。