reactjs - Ant 设计 : How can I handle Button in Card extra onClick event?

Question

我想单击 Card extra 中的 X 按钮以显示“Confirm Remove Todo modal”。

用户界面:

但是...

现实是当我点击 X 按钮然后它从 Card 事件中看到“Edit Todo modal”时。

我该如何解决？

代码:

            {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 警报会弹出两次。前者来自extra的onClick，后者来自Card的onClick。

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

只需添加一个简单的e.stopPropagation() 即可防止extra 按钮onClick 中的冒泡。请引用:https://javascript.info/bubbling-and-capturing#stopping-bubbling获取更多信息。

回到您的代码，只需像这样更新您的 Button 的 onClick:

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