React.js中点击一次后禁用按钮问题求助

问题原因 #

你遇到的Expected an assignment or function call and instead saw an expression错误，是因为循环渲染的按钮onClick箭头函数中，handleClick仅被引用但未调用，且没有传递它需要的event参数。

直接修复语法错误 #

将按钮的onClick回调修改为以下形式，确保调用handleClick并传递事件对象：

<button 
  type="submit" 
  onClick={(event) => {
    addLike(val.id, val.likes + 1);
    handleClick(event); // 调用handleClick并传入event
  }} 
  className="btn btn-success"
>
  LIKE
</button>

修改后，单个按钮的禁用逻辑就能在多按钮场景下生效，点击后当前按钮会被禁用。

更推荐的React状态管理方案 #

直接操作DOM（event.currentTarget.disabled = true）在React中并非最佳实践，列表渲染场景下组件重新渲染后禁用状态可能丢失。建议通过React状态控制按钮禁用：

1. 初始化状态记录每个按钮的禁用状态：

import { useState } from 'react';

// 用对象存储每个广告ID对应的禁用状态，初始为空
const [disabledButtons, setDisabledButtons] = useState({});

2. 编写点击处理函数，通过状态控制禁用：

const handleLikeClick = (adId, currentLikes) => {
  // 更新状态，标记当前广告的按钮为禁用
  setDisabledButtons(prevState => ({
    ...prevState,
    [adId]: true
  }));
  // 执行点赞逻辑
  addLike(adId, currentLikes + 1);
};

3. 修改按钮组件，用状态控制disabled属性：

<button 
  type="submit" 
  onClick={() => handleLikeClick(val.id, val.likes)} 
  className="btn btn-success"
  disabled={disabledButtons[val.id] || false}
>
  LIKE
</button>

这种方式通过React状态管理禁用状态，更符合React的数据流模式，避免直接操作DOM带来的潜在问题。

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