reactjs切换按钮中的一个onclick如何实现两个不同的功能[重复]答案

【问题标题】：how do Two different functions on a single onclick in reactjs Toggle button [duplicate]reactjs切换按钮中的一个onclick如何实现两个不同的功能[重复]
【发布时间】：2020-10-29 16:54:46
【问题描述】：

我有两个不同的功能

Deactivate = () => {
 //logic for deactivate
}

Activate = () => {
 //logic for activate
}


   return (
       <div>
          <Toggle
              defaultChecked={this.state.isChecked}
              className="switch-danger"
            />
       </div>
     )

第一次点击触发“停用功能”时的切换按钮，然后第二次点击触发“激活按钮”。

【问题讨论】：

您访问了吗？ stackoverflow.com/questions/26069238/…
onClick={() => this.state.isChecked ? this.Deactivate() : this.Activate()}
您是否在状态中保存“激活”值以在回调处理程序中使用简单的三元组？这会更适合生命周期功能吗？您能否更新您的问题以包含完整的代码以及您尝试执行的操作有哪些问题（如果有）？
@DennisVash 不是骗人的； OP 希望呼叫 A 或 B，而不是同时呼叫。
@mplungjan 是的，我想创建单独函数的方法已经足够接近了；只是不确定这对每个人来说都很明显

标签： javascript reactjs ecmascript-6

【解决方案1】：

首先将Toggle 设为controlled component，然后如果isChecked 为true，则调用Activate 和false 为Deactivate，反之亦然。

...
checkHandler = () => {
  this.setState((previousState) => {
    const isChecked = !previousState.isChecked

    isChecked ? this.activate() : this.deactivate()

    return { isChecked }
  })
}

deactivate = () => {
  //logic for deactivate
}

activate = () => {
  //logic for activate
}

render() {
  const { isChecked } = this.state

  return (
    <div>
      <Toggle
        className="switch-danger"
        value={isChecked}
        onChange={this.checkHandler}
      />
    </div>
  )
}

【讨论】：

请用代码描述我
@苯检查我的编辑