函数不调用 React 中的 onclick 事件

Question

这里我只想在单击按钮时调用一个 walletconnect 函数。但它没有调用任何函数。如果我哪里不对，请纠正我。

App.tsx

import * as React from 'react';
import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal";


class App extends React.Component<any, any> {

  constructor(props:any) {
    super(props)
    this.state = {
      address: ''

    }
    
    const connector = new WalletConnect({
      bridge: "https://bridge.walletconnect.org", // Required
      qrcodeModal: QRCodeModal,
    });
  }

  walletConnectFunc = async () => {
    const connector = new WalletConnect({
      bridge: "https://bridge.walletconnect.org", // Required
      qrcodeModal: QRCodeModal,
    });
    if (connector.connected) {
      alert("already connected")
      return
    }
    connector.createSession();
    connector.on("connect", async (error, payload) => {
      console.log("connect")
      if (error) {
        throw error;
      }

      // Get provided accounts and chainId
      const { accounts, chainId } = payload.params[0];
      console.log("connect account", accounts)
      console.log("chainid account", chainId)

      const obj = {
        "address": accounts[0],

      }
      this.setState({ address: obj.address })
      console.log(this.state.address)
      alert(this.state.address)
    })


  }
  render() {
    return (
      <div className="App">
          <div>
            <button className="btn btn-primary my-4" type="button" onClick={() => this.walletConnectFunc()}>WalletConnect</button>
          </div>
      </div>
    );
  }
}

export default App;

如果需要更多代码，请在评论部分告诉我。我会用这些信息更新我的问题。

Answer 1

我想您在这里缺少的是绑定 class 方法。你只需要像这样在构造函数上编写绑定方法：

...
  constructor(props:any) {
    super(props)
    this.state = {
      address: ''
    }
   this.walletConnectFunc = this.walletConnectFunc.bind(this);
...

Answer 2

首先，你应该去掉多余的async关键字，只要walletConnectFunc()就够了。仅仅是因为，在你的函数中不要调用任何 await 关键字，所以那没有意义。

其次，您只需像 onClick={this.walletConnectFunc} 一样监听事件 onClick 以避免在渲染中创建额外的功能（作为@Zac Anger 的建议）

最后， 如果您必须在函数内部访问 this，请使用 arrow function 或者您也可以绑定 this 上下文这样（对我来说，我强烈建议使用第三种方式来提高性能）

总之，在使用context的时候只需要使用arrow function。

import React, { Component } from "react";
import "./styles.css";

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {
      address: ""
    };

    this.walletConnectFuncAsync = this.walletConnectFuncAsync.bind(this);
  }

  async walletConnectFuncAsync() {
    await this.sleep(1000);
  }

  sleep(ms) {
    return new Promise((resolve) => {
      setTimeout(() => alert("Woke up after " + ms + "ms"), ms);
    });
  }

  walletConnectFunc() {
    alert(123);
  }

  render() {
    return (
      <div className="App">
        <div>
          <button
            className="btn btn-primary my-4"
            type="button"
            onClick={this.walletConnectFunc}
          >
            WalletConnect
          </button>
          <button
            className="btn btn-primary my-4"
            type="button"
            onClick={this.walletConnectFuncAsync}
          >
            WalletConnect_Async
          </button>
        </div>
      </div>
    );
  }
}

Demo on Codesandbox here

函数不调用 React 中的 onclick 事件

Function is not calling on onclick event in React

javascript

reactjs

typescript

this

arrow-functions