不明白为什么 onClick 在 React 中不起作用答案

【问题标题】：Can't understand why onClick not working in React不明白为什么 onClick 在 React 中不起作用
【发布时间】：2020-05-20 16:12:15
【问题描述】：

我在 JSX 中有代码：

    {data.map(({ id }) => (
           <div key={id}
                id={id}
                onClick={() => handleClick(id)}
           >

           </div>
    ))}

渲染后它不起作用，我不明白为什么。但是，如果我写 onClick={handleClick(id)} 它会起作用，但只会在它变红的时候工作一次，再也不会了。下面是handleClick代码：

export default function handleClick(id) {
    return (dispatch, getState) => {
       console.log(id);
    }
}

我每次点击div时如何生成handleClick？

【问题讨论】：

我认为handleCLick 中的大写 L 只是问题中的拼写错误，而不是问题的原因？
是的，打错了
请向我们展示您是如何导入函数的，如何将其连接到组件以及如何/是否从道具中解构它？（如果是类组件，应该是this.props.handleClick？）

标签： javascript html reactjs redux jsx

【解决方案1】：

您似乎正在尝试调度一个 redux 异步操作创建器。您不能直接从 HTML 元素 onClick 处理程序调度。如果您 bind the redux action creators 它应该按预期工作。

在您的组件安装中：

actionCreators = bindActionCreators({ handleClick }, dispatch);

在你的渲染函数中：

onClick={() => actionCreators.handleClick(id)}

如果您没有尝试使用 redux，您可以使用不同的点击处理程序记录 id：

function handleClick(id) {
  // return mouse event handler for onClick
  return (event) => {
    console.log(id);
  }
}

onClick={handleClick(id)}

如果您想以最快的方式记录id，您也可以使用内联点击处理程序：

onClick={() => console.log(id)}

如果您尝试使用 redux 但 redux 异步操作创建器未触发，则您的 onClick 处理程序可能很好但 redux 存储未配置为处理异步操作。修复方法是找到 redux 存储的创建位置并使用异步 thunk 中间件调用 applyMiddleware。

import thunk from 'redux-thunk'

const store = createStore(reducer, applyMiddleware(thunk))

【讨论】：

不，我通过调度程序连接函数，我只是没有在代码中显示它
@IWProgrammer 您的 redux 存储可能没有异步 thunk 中间件。您可能需要applyMiddleware 到商店。默认情况下，它不会处理异步操作。 redux.js.org/api/…
我使用中间件
div 是否可能有pointer-events: none 或其他阻止点击的CSS 规则？您能否确认在开发工具控制台中显示了一个简单的内联 onClick 处理程序，该处理程序记录了 id？
您的代码看起来正确。我敢打赌这是动作创建者绑定或 redux thunk 中间件无法按预期工作的问题。如果您记录 handleClick 函数本身，它看起来像绑定动作创建者还是原始函数签名？