如何在React前端通过Ethers调用合约receive()低级函数并发送ETH？

前提准备 #

• 确保React项目已安装Ethers库：npm install ethers 或 yarn add ethers
• 已通过钱包（如MetaMask）获取用户的签名者实例
• 持有目标合约的有效地址

实现步骤 #

1. 连接用户钱包并获取签名者 #

先完成钱包连接，拿到可签名交易的账户实例：

import { ethers } from "ethers";

async function getSigner() {
  // 接入MetaMask的浏览器提供者
  const provider = new ethers.BrowserProvider(window.ethereum);
  // 请求用户授权连接钱包
  await provider.send("eth_requestAccounts", []);
  // 获取当前活跃的签名账户
  return provider.getSigner();
}

2. 发送ETH触发receive函数 #

receive()是payable类型的 fallback 函数，无需显式调用函数名，直接向合约地址转账ETH即可触发。代码示例：

async function triggerReceiveFunction() {
  try {
    const signer = await getSigner();
    const contractAddress = "你的合约地址";
    // 定义要发送的ETH数量，这里以0.5 ETH为例，自动转换为wei
    const sendAmount = ethers.parseEther("0.5");

    // 构建交易参数
    const txParams = {
      to: contractAddress,
      value: sendAmount
    };

    // 发送交易并等待上链确认
    const txResponse = await signer.sendTransaction(txParams);
    await txResponse.wait();

    console.log("交易确认，receive函数已触发");
  } catch (err) {
    console.error("交易失败：", err);
  }
}

3. 监听合约事件（可选） #

如果需要监听合约抛出的TransferReceived事件，可以通过合约实例实现：

// 只保留事件定义的简化ABI
const contractABI = [
  "event TransferReceived(address indexed sender, uint256 value)"
];

async function listenToTransferEvent() {
  const provider = new ethers.BrowserProvider(window.ethereum);
  const contract = new ethers.Contract("你的合约地址", contractABI, provider);

  // 监听事件触发
  contract.on("TransferReceived", (sender, value) => {
    console.log(`收到转账：发送方${sender}，金额${ethers.formatEther(value)} ETH`);
  });
}

关键注意事项 #

• 调用者必须是合约的owner，否则onlyOwner修饰符会直接拒绝交易
• 发送的ETH金额需能被recipients.length整除，否则会有剩余ETH留存于合约中
• 需处理用户拒绝授权、gas不足、链上交易失败等异常情况

内容的提问来源于stack exchange，提问作者JackBum