javascript - 如何在react中重新绑定(bind)点击事件

Question

在 react 中动态更改事件绑定(bind)的推荐/最干净的方法是什么？

例如，如果我最初有一个这样的按钮

<button type="button" onClick={this.handleFirstClick}>

然后在handleFirstClick方法中

handleFirstClick() {
    //do other stuff
    //rebind the button, so that next time it's clicked, handleSecondClick() would be called
}

如果我的意思不太清楚，这就是我想做的，使用 jQuery 而不是 React

$('#myButton').on('click', handleFirstClick);

function handleFirstClick() {
    //other stuff
    $('#myButton').off('click');
    $('#myButton').on('click', handleSecondClick);
}

Answer 1

解决方案 1:React State 和 Ternary Expressions

为了更改事件的绑定(bind)，您需要在渲染方法中使用 if-else。为组件创建一些状态来处理按钮是否已被单击。第一次单击后，设置状态，以便将来运行第二个函数。您可以包括基本的 ternary expression检查 render() 中的状态。

class FancyButton extends React.Component {
  constructor() {
    super()
    this.state = {
      clicked: false
    }

    //Bindings for use in render()
    this.onFirstClick = this.onFirstClick.bind(this)
    this.onSecondClick = this.onSecondClick.bind(this)
  }

  onFirstClick() {
    console.log("First click")
    this.setState({
      clicked: true
    })
  }

  onSecondClick() {
    console.log("Another click")
  }

  render() {
    return ( <
      button onClick = {
        this.state.clicked ? this.onSecondClick : this.onFirstClick
      } > Click < /button>
    )
  }
}

ReactDOM.render( < FancyButton / > , document.getElementById("root"))

<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>
<div id="root"></div>

解决方案 2:在对象属性中保留状态

从更一般的意义上来说，您可能不需要更改渲染方法中的事件处理程序。如果您只调用一个 onClick 处理程序并切换对象属性，则可以在每次单击后跳过重新渲染 React 组件(因为跳过对 this.setState 的调用)。

class FancyButton extends React.Component {
  constructor() {
    super()
    this.clicked = false

    //Bindings for use in render()
    this.onClick = this.onClick.bind(this)
  }

  onClick() {
    if (!this.clicked) {
      this.onFirstClick()
    } else {
      this.onSecondClick()
    }
    this.clicked = true
  }

  onFirstClick() {
    console.log("First click")
  }

  onSecondClick() {
    console.log("Another click")
  }

  render() {
    return ( <
      button onClick = {
        this.onClick
      } > Click < /button>
    )
  }
}

ReactDOM.render( < FancyButton / > , document.getElementById("root"))

<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>
<div id="root"></div>

我个人推荐第二种解决方案，因为它更有效，但您可以自行决定哪种最适合您的情况。