Question

我的onClick不是在点击时触发，而是在页面加载时触发。以下是相关代码：

App.js

callAPI(x) {
    fetch("http://localhost:8080/" + x)
      .then(res => res.text())
      .then(res => this.setState({ apiResponse: res }))
      .catch(err => err);
  }

render() {
    <Button
       onClick={this.callAPI('api')}
       type="success"
       className="input-lg">
       Search
    </Button>

按钮组件：

import React from "react";

function Button({ type = "default", className, children, onClick }) {
  return (
    <button onClick={onClick} className={["btn btn-lg", `btn-${type}`, 
    className].join(" ")}>
      {children}
    </button>
  );
}

export default Button;

非常感谢您的帮助！

Answer 1

更改

<Button onClick={this.callAPI('api')} type="success" className="input-lg">
  Search
</Button>

到

<Button onClick={() => this.callAPI('api')} type="success" className="input-lg">
  Search
</Button>

您将在设置属性后立即调用该函数，而不是单击它时。要使功能在单击时触发，您需要传递一个尚未调用的功能。

Answer 2

因为您使用的是自动将其启动。尝试这样的事情。

 <Button
   onClick={() => this.callAPI('api')}
   type="success"
   className="input-lg">
   Search
</Button>

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

Answer 3

更改

onClick={this.callAPI('api')}

收件人

onClick={() => this.callAPI('api')}

React按钮组件onClick（）在页面加载时触发，而非onclick

3 个答案: