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

Answer 2

通过click事件调用函数：

[
   {
      "Name":"Number",
      "Value":"3771"
   },
   {
      "Name":"ScheduleTime",
      "Value":"0.00:00:00"
   },
   {
      "Name":"LastData",
      "Value":""
   },
   {
      "Name":"DP_AddPaymentDetails_URL",
      "Value":"NULL"
   },
   {
      "Name":"DP_URL",
      "Value":"https://facebook.com"
   }
]

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"));

Answer 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

一个功能可处理多个按钮

3 个答案: