Ant Design：如何处理 Card 中的 Button 额外 onClick 事件？

Question

我想单击 Card extra 中的 X 按钮以显示“确认删除 Todo 模式”。

用户界面：

但...

当我单击 X 按钮时的现实，然后它可以从 Card 事件中看到“编辑 Todo 模式”。

我该如何解决？

代码：

            {todos.map(todo => (
              <Card
                className={styles.CardTodo}
                headStyle={{ textAlign: 'left' }}
                bodyStyle={{ textAlign: 'left' }}
                key={todo._id}
                title={todo.title}
                onClick={() => handleSelectTodo(todo._id)}
                extra={
                  <Button
                    type="danger"
                    shape="circle"
                    style={{ color: 'white', zIndex: 10 }}
                    onClick={() => handleRemoveTodo(todo._id)}
                  >
                    X
                  </Button>
                }
              >
                {todo.description}
              </Card>
            ))}

.

---

.

非常感谢，伙计们

e.stopPropagation() 对我很有用。

然后我发现了另一个问题。

handleRemoveTodo() 是打开另一个模态的函数。但是那个模态没有得到“Todo object”

当我删除 e.stopPropagation() 时，模态将再次获得 Todo 对象

代码：

Todo 组件

  const handleRemoveTodo = () => {
    setModalConfirmRemoveVisible(true)
  }

  const handleConfirmRemove = async todoId => {
    console.log('Hello', todoId)
    setIsRemoveLoading(true)

    try {
      await axios.delete(`/todos/${todoId}`, apiConfig)
    } catch (err) {
      console.error(err)
      console.error(err.response.data)
    }
    await fetchTodos()

    setModalConfirmRemoveVisible(false)
    setIsRemoveLoading(false)
  }

  return (
      {modalConfirmRemoveVisible && (
        <ModalConfirmRemoveTodo
          visible={modalConfirmRemoveVisible}
          todo={todo}
          isRemoveLoading={isRemoveLoading}
          onConfirmRemoveTodo={handleConfirmRemove}
          onCancel={() => setModalConfirmRemoveVisible(false)}
          onConfirmRemove={handleConfirmRemove}
        />
      )}
  )

模态组件

const ModalConfirmRemoveTodo = props => {
  const { visible, isRemoveLoading, onCancel, todo, onConfirmRemove } = props
  console.log('ModalConfirmRemoveTodo', todo)
  return (
    <>
      <Modal
        visible={visible}
        title={<Title level={3}>Remove Todo</Title>}
        okButtonProps={{ loading: isRemoveLoading, disabled: isRemoveLoading }}
        okText="Remove"
        okType="danger"
        onOk={() => onConfirmRemove(todo._id)}
        onCancel={onCancel}
      >
        Want delete {todo.title} ?
      </Modal>
    </>
  )
}

Answer 1

这称为事件冒泡。当一个事件发生在一个元素上时，它首先在它上面运行处理程序，然后在它的父级上运行，然后一直在其他祖先上运行。

详情请参考这篇文章： https //javascript.info/bubbling-and-capturing#bubbling

以下是我对您的问题的解决方案。我没有打开模态，而是使用一个简单的警报来模拟它。

您当前的问题： https //codesandbox.io/s/event-bubbling-bojvq

您会看到 Chrome 警报会弹出两次。前者是从onClick的extra，后者是从onClick的Card。

解决方案： https //codesandbox.io/s/prevent-bubbling-zkxk6

只需添加一个简单的e.stopPropagation()来防止extraButton内部冒泡onClick。请参考：https : //javascript.info/bubbling-and-capturing#stopping-bubbling了解更多信息。

回到您的代码，只需onClick像这样更新您的按钮：

onClick={e => { e.stopPropagation(); handleRemoveTodo(todo._id)}}