javascript - 一个函数处理多个按钮

Question

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

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

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