反应 onClick 不触发 es6

Question

我已经搜索了这个问题，但没有任何解决方案对我有用。我知道该函数已正确注册，因为如果我执行类似 onClick={this.searchSolutions()} 的操作，那么 console.log 会在页面加载时显示。只是 onClick 部分不起作用。

import React from 'react';

class QueryForm extends React.Component {

  constructor(props) {
    super(props);
    this.searchSolutions = this.searchSolutions.bind(this);
  }

  searchSolutions() {
    console.log("button clicked");
  }

  render() {
    return (
      <div className="queryForm">
        <h1 className="lead"></h1>
        <div className="form-group">
          <label for="solutionQuery">Search by solution:</label>
          <input type="text" className="form-control" id="solutionQuery" placeholder="Enter solution name" />
          <button type="button" className="btn btn-outline btn-primary" onClick={this.searchSolutions}>Search</button>
        </div>
        <div id="results">

        </div>
      </div>
    );
  }
}

module.exports = QueryForm;

Answer 1

这段代码对我有用，在标签元素中使用for 确实有问题（应该是htmlFor）。这可能是导致您出现问题的原因，具体取决于您如何设置环境。

Here is a fiddle 与该修复程序和方法按预期运行。

Answer 2

您的问题是您使用的是this.searchSolutions()。这样做将在读取函数后立即运行该函数（因此每当该元素首次呈现时）。仅使用this.searchSolutions（不使用()）将解决您的问题。