OnClick 事件在 React 中的第一次单击时未触发答案

【问题标题】：OnClick event not firing on first click in ReactOnClick 事件在 React 中的第一次单击时未触发
【发布时间】：2021-06-20 17:00:23
【问题描述】：

OnClick 事件在第一次点击时没有在反应应用程序中触发，有时需要超过 2/3 的点击才能触发，但有时会在一次点击中触发。我发现它不是从按钮触发的。如何解决这个问题？

{url !== 'http://localhost:3000/assistant/doctors' && (
                        <td
                            style={{ width: '10%' }}
                            className={[styles.tdBtn, styles.iconBtn].join(' ')}
                        >
                            <button onClick={() => handleUpdateData(id)}>
                                <FontAwesomeIcon icon={faPen} />
                            </button>{' '}
                            <button onClick={() => handleDelData(id)}>
                                <FontAwesomeIcon icon={faTrashAlt} />
                            </button>
                        </td>
                    )}

【问题讨论】：

你能告诉我们函数handleUpdateData和handleDelData吗？
它是从道具调用的。该函数在父组件中，但事件调用没有转到我发现它没有在我单击时一直调用的函数

标签： reactjs onclick event-handling

【解决方案1】：

从给定的示例中，我可以猜测这是因为 React 17 对事件委托方法的更改。为了防止这种行为，您可以在事件上调用 stopPropagation：

const handleUpdateData = (e, id) => {
  e.stopPropagation();
  // rest of your code
}

你现在必须使用：

onClick={(event) => handleUpdateData(event, id)}

【讨论】：