一个函数处理多个按钮答案

【问题标题】：One function handles multiple buttons一个函数处理多个按钮
【发布时间】：2025-12-15 16:55:01
【问题描述】：

在使此代码正常工作时遇到了一些问题。只是想使用一个功能而不是 3 个单独的功能来不同地处理每个按钮案例。一些非常古老的 * 答案建议使用开关，但我似乎无法让它工作。下面的代码没有错误，但按下按钮不会向控制台打印任何内容。

  myFunction = button => {
      var x = button.id;
      switch (x) {
          case 'All Saves':
              console.log('All Saves');
              break;
          case 'Threads':
              console.log('Threads');
              break;
          case 'Comments':
              console.log('Comments');
              break;
          default:
              return false;
      }
  }


  render () {
    return (
      <div className="container">
        <div className="btn-group">
          <button type="button" onClick={this.myFunction.bind(this)} id="All Saves">All Saves</button>
          <button type="button" onClick={this.myFunction.bind(this)} id="Threads">Threads</button>
          <button type="button" onClick={this.myFunction.bind(this)} id="Comments">Comments</button>
        </div>
      </div>
      ) 
  }

【问题讨论】：

您将myFunction 定义为变量，而您将点击处理程序定义为this.myFunction。并不总是一样的。
你的函数被调用了吗？
当您console.log(x); 时会发生什么？还是console.log(button)？
@VLAZ 不确定我理解你的意思。
@SimonThiel 我希望它在点击时被调用。我不会在此之外称呼它。

标签： javascript reactjs button switch-statement

【解决方案1】：

您忘记访问事件的target 属性：

  myFunction = button => {
      var x = button.target.id;
      switch (x) {
          case 'All Saves':
              console.log('All Saves');
              break;
          case 'Threads':
              console.log('Threads');
              break;
          case 'Comments':
              console.log('Comments');
              break;
          default:
              return false;
      }
  }

【讨论】：

将button 重命名为event 也是有意义的。
这是惯例。
或者使用this而不是button。
@VLAZ — 那行不通。看看bind 做了什么。请注意，bind 正在使用中。
@Quentin 啊，该死的。忘了那个。你是对的 - bind 会阻止它。

【解决方案2】：

使用点击事件调用函数：

class App extends React.Component {
  myFunction = event => {
    var x = event.target.id;
    switch (x) {
        case 'All Saves':
            console.log('All Saves');
            break;
        case 'Threads':
            console.log('Threads');
            break;
        case 'Comments':
            console.log('Comments');
            break;
        default:
            return false;
    }
}

  render() {
    return (
      <div className="container">
        <div className="btn-group">
          <button type="button" onClick={e => this.myFunction(e)} id="All Saves">All Saves</button>
          <button type="button" onClick={e => this.myFunction(e)} id="Threads">Threads</button>
          <button type="button" onClick={e => this.myFunction(e)} id="Comments">Comments</button>
        </div>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

【解决方案3】：

class MyButtons extends React.Component {
  myFunction = event => {
    var x = event.target.id;
    switch (x) {
        case 'All Saves':
            console.log('All Saves');
            break;
        case 'Threads':
            console.log('Threads');
            break;
        case 'Comments':
            console.log('Comments');
            break;
        default:
            return false;
    }
}

  render() {
    return (
      <div className="container">
        <div className="btn-group">
          <button type="button" onClick={e => this.myFunction(e)} id="All Saves">All Saves</button>
          <button type="button" onClick={e => this.myFunction(e)} id="Threads">Threads</button>
          <button type="button" onClick={e => this.myFunction(e)} id="Comments">Comments</button>
        </div>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

这是您的问题的工作示例

https://codesandbox.io/s/gifted-night-di8de?fontsize=14

【讨论】：