Question

OnClick 事件在第一次点击时不会在 React 应用程序中触发，有时需要超过 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>
                    )}

Answer 1

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

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

您现在必须使用：

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

在 React 中第一次点击时不会触发 OnClick 事件

1 个答案: