Question

点击

<a onClick={this.toggle.bind(this)} className="link-open-inner-comments greenlink">CLICK</a>

有一个代码来显示另一个div

toggle() {
      $( ".link-open-inner-comments" ).on( "click", function() {
        $(this).next().toggle();
        $(this).toggleClass( "bounce" );
    });
    }

我只点击2次就可以了。如何修改第一次点击工作？

Answer 1

我只点击2次就可以了。如何修改第一次点击工作？

右：首次点击是连接事件处理程序。然后第二次单击触发该处理程序（并添加另一个处理程序）。这几乎肯定不是你想要做的。

您可能只想在处理程序中执行操作。要按照您的方式执行此操作，通常使用In [12]: df.loc[error_days, 'Sales'] = df.loc[error_days, 'Sales'].clip_upper(8) In [13]: df Out[13]: Sales 2017-08-01 5 2017-08-02 8 2017-08-03 15 2017-08-04 20 2017-08-05 8：

ref

然后：

<a ref={input => this.$input = $(input)} onClick={this.toggle.bind(this)} className="link-open-inner-comments greenlink">CLICK</a>

实例：

toggle() {
    this.$input.next().toggle();
    this.$input.toggleClass( "bounce" );
}

class Example extends React.Component {
  constructor(...args) {
      super(...args);
      this.toggle = this.toggle.bind(this); // Do this once, not on every render
  }

  toggle() {
      this.$input.next().toggle();
      this.$input.toggleClass( "bounce" );
  }

  render() {
      return <div>
           <a ref={input => this.$input = $(input)} onClick={this.toggle} className="link-open-inner-comments greenlink">CLICK</a>
          <div style={{display: "none"}}>The thing that gets shown</div>
      </div>;
  }
}

ReactDOM.render(
  <Example />,
  document.getElementById("root")
);

.bounce {
  color: green; /* Just to show that we add the class */
}

但是，这不是你想用React做的。相反，让组件更改其状态，并在元素的模板中使用该状态。像这样：

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

class Example extends React.Component {
  constructor(...args) {
      super(...args);
      this.state = {open: false};
      this.toggle = this.toggle.bind(this); // Do this once, not on every render
  }

  toggle() {
      this.setState(state => ({open: !state.open}));
  }

  render() {
      return <div>
          <a onClick={this.toggle} className={`${this.state.open ? 'bounce ' : ''}link-open-inner-comments greenlink`}>CLICK</a>
          {this.state.open ? <div>The thing that gets shown</div> : null}
      </div>;
  }
}

class Example extends React.Component {
  constructor(...args) {
      super(...args);
      this.state = {open: false};
      this.toggle = this.toggle.bind(this); // Do this once, not on every render
  }

  toggle() {
      this.setState(state => ({open: !state.open}));
  }

  render() {
      return <div>
          <a onClick={this.toggle} className={`${this.state.open ? 'bounce ' : ''}link-open-inner-comments greenlink`}>CLICK</a>
          {this.state.open ? <div>The thing that gets shown</div> : null}
      </div>;
  }
}

ReactDOM.render(
    <Example />,
    document.getElementById("root")
);

.bounce {
  color: green; /* Just to show that we add the class */
}

您有很多选项可以处理您正在切换的事情。如上所述包含/不包括它是一种选择，但如果渲染物品很昂贵，则有更复杂的选项。

Answer 2

你绑定了两次...一个在内联onclick中，另一个在toggle()方法中有一个click事件绑定。

toggle()方法会多次绑定click事件。

删除$( ".link-open-inner-comments" ).on( "click", function() {应解决问题

toggle(event) {
        $( event.target ).next().toggle();
        $( event.target ).toggleClass( "bounce" );
    });
}

jQuery单击reactJS。错误两次点击

2 个答案: