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。这样做将在读取后立即运行该函数（因此，无论何时首次呈现该元素）。仅使用()（不使用<settings> <mirrors> <mirror> <id>mrm-maven-plugin</id> <name>Mock Repository Manager</name> <url>http://www.mycompany.com/maven-reporistory-manager</url> <mirrorOf>*,!archetype</mirrorOf> </mirror> </mirrors> <profiles> <profile> <id>acme</id> <repositories> <repository> <id>archetype</id> <url>https://www.acme.com/repo</url> <releases> <enabled>true</enabled> <checksumPolicy>fail</checksumPolicy> </releases> <snapshots> <enabled>true</enabled> <checksumPolicy>warn</checksumPolicy> </snapshots> </repository> </repositories> </profile> </profiles> <activeProfiles> <activeProfile>acme</activeProfile> </activeProfiles> </settings>）将解决您的问题。

React onClick不会触发es6

2 个答案: