Ant Design: Как мне обработать событие Button in Card onClick?

Question

Я хочу нажать кнопку X на дополнительной карточке, чтобы увидеть «Подтвердить удаление модального тодо».

Пользовательский интерфейс:

Но ...

реальность, когда я нажимаю кнопку X, тогда вместо нее появляется событие "Редактировать модальный тодо" из события карты.

как мне это исправить?

Код:

            {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»

, когда я удаляю 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

Это называется Event Bubbling . Когда событие происходит с элементом, он сначала запускает обработчики для него, затем для своего родителя, а затем до других предков.

Подробные сведения см. В этой статье: 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(), чтобы предотвратить пузырение внутри extra Кнопка onClick. Пожалуйста, обратитесь к этому: https://javascript.info/bubbling-and-capturing#stopping -бублинг для получения дополнительной информации.

Вернитесь к своему коду, просто обновите onClick вашей кнопки следующим образом:

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

Answer 2

Используйте метод stopPropagation () для вашего события:

<Button
  type="danger"
  shape="circle"
  style={{ color: 'white', zIndex: 10 }}
  onClick={e => { e.stopPropagation(); handleRemoveTodo(todo._id)}}
>
  X
</Button>