React中第一次单击时未触发OnClick事件

Question

在React应用程序中，第一次点击时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>
                    )}

- MIR TAUHIDUL ISLAM

---

你能展示一下 handleUpdateData 和 handleDelData 这两个函数吗？ - VersifiXion

它是从props调用的。该函数位于父组件中，但事件调用未传递到该函数。我发现它并不总是在我点击时调用。 - MIR TAUHIDUL ISLAM

Answer 1

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

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

现在你必须使用：

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

- Bhojendra Rauniyar