Как отменить событие для конкретного элемента?

Question

[Artem641]

Всем привет. Есть состояние editMode, в зависимости от которого мы показываем span или input. На Input повешено событие onBlur, и при уходе фокуса с input ( пользователь передумал редактировать данные ) editMode устанавливается в false. Но если в режиме редактирования кликнуть по кнопке save, срабатывает onBlur. Вопрос в том, как прервать это событие только для кнопки. Я знаю, что нужно применить event.stopPropagation(), но не пойму как именно это надо сделать.
Вот мой item:

import { TodoType } from '../../App'
import { MyButton } from '../UI/MyButton/MyButton'
import { MyInput } from '../UI/MyInput/MyInput'
//@ts-ignore
import s from './TodoItem.module.css'
import { ChangeEvent, useState } from 'react'

type TodoItemPropsType = {
  todo: TodoType
  todos: Array<TodoType>
  setTodos: any
}

export const TodoItem: React.FC<TodoItemPropsType> = ({
  todo,
  setTodos,
  todos,
}) => {
  const [editMode, setEditMode] = useState(false)
  const [editTodoText, setEditTodoText] = useState(todo.title)

  const updateTodo = (event: ChangeEvent) => {
    setTodos(
      todos.map((t) => {
        if (t.id == todo.id) {
          return { ...t, title: editTodoText }
        }
        return t
      })
    )
    setEditMode(false)
  }

  const setTodoStatus = (todoId: number) => {
    setTodos(
      todos.map((t) => {
        if (t.id == todo.id) {
          return { ...t, status: !todo.status }
        }
        return t
      })
    )
  }

  const deleteTodo = (todoId: number) => {
    setTodos(todos.filter((t) => t.id !== todoId))
  }

  return (
    <div className={s.todoItem}>
      <div>
        {editMode ? (
          <div>
            <MyInput
              value={editTodoText}
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                setEditTodoText(e.currentTarget.value)
              }
              onBlur={() => {
                setEditMode(false)
              }}
              autoFocus={true}
              type="text"
            />
            <MyButton onClick={updateTodo}>Save</MyButton>
          </div>
        ) : (
          <span className={todo.status ? s.completed : ''}>{todo.title}</span>
        )}
      </div>
      <div>
        <div>
          <label id="status" htmlFor="input">
            Completed{' '}
          </label>
          <input
            onChange={() => {
              setTodoStatus(todo.id)
            }}
            checked={todo.status}
            type="checkbox"
            name=""
            id="status"
          />
        </div>
        <div>
          <MyButton small={true} onClick={() => setEditMode(true)}>
            Edit
          </MyButton>
        </div>
        <div>
          <MyButton small={true} onClick={() => deleteTodo(todo.id)}>
            Delete
          </MyButton>
        </div>
      </div>
    </div>
  )
}

Моя кастомная кнопка:

//@ts-ignore
import s from './MyButton.module.css'

type MyButtonPropsType = {
  children: string
  onClick?: any
  small?: boolean
  disabled?: boolean
}

export const MyButton: React.FC<MyButtonPropsType> = ({
  children,
  small,
  ...props
}) => {
  return (
    <button className={`${s.button} ${small ? s.small : ''}`} {...props}>
      {children}
    </button>
  )
}

Comments

[WbICHA]

А лучше всего было бы не бесить пользователей и убрать онблур с добавлением кнопки кенцел. Потому что пользователь тебе скажет большое спасибо после того, как допишет всё, что хотел, и случайно нажмёт в рандомное место на странице или нажмёт таб и потеряет всё, что он написал.

[szQocks]

WbICHA, тот случай когда ты пьяный, и промахнулся по кнопке "save"

Answer 1

[Даша Циклаури]

замени button onClick на onMouseDown
<MyButton onMouseDown={updateTodo}>Save</MyButton>

Comments

[Artem641]

Благодарю, заработало.

[szQocks]

Artem641, с чего это заработало ?

[szQocks]

надо юзать onMouseDown в паре с preventDefault, да я может и не верный ответ написал но и она не права

[Даша Циклаури]

szQocks, а поясни пожалуйста для чего использовать preventDefault для onMouseDown? В качестве ответа приведи пожалуйста ссылку на документацию, где будет список default событий при onMouseDown

[szQocks]

Даша Циклаури, ну вот ты и приведи примеры с чего это onMouseDown, решил проблему ? твой же ответ выбрали верным, решила на меня грязную работу скинуть, молодец

[Даша Циклаури]

szQocks, объясню: проблема заключалась в том, что событие onBlur завершается раньше, чем событие onClick. Соответственно, когда пользователь кликал на кнопку, она уже была размонтирована движком реакта из-за того, что кнопка находится под тэгом editMode. Последовательность такая:
- button onMouseDown
- input onBlur
- button onClick

Поскольку onBlur в eventLoop раньше onClick, то он выставлял editMode=false, что в свою очередь вызывало удаление кнопки и как результат отмену выполнения события onClick. По приоритету вызов onMouseDown выше, onBlur, поэтому событие успевает отработать до следующего рендера.
Данное поведение легко проверить в какой-то песочнице типа jsfiddle.
Вопрос по preventDefault остается открытым. Не благодари.

[szQocks]

Даша Циклаури, https://codesandbox.io/s/xenodochial-wave-m72q5y?f...

[Даша Циклаури]

szQocks, нет, я же пишу что из-за того что под флагом editMode происходит размонтирование. Посмотри на его код в вопросе

<div>
        {editMode ? (
          <div>
            <MyInput
              value={editTodoText}
              onChange={(e: ChangeEvent<HTMLInputElement>) =>
                setEditTodoText(e.currentTarget.value)
              }
              onBlur={() => {
                setEditMode(false)
              }}
              autoFocus={true}
              type="text"
            />
            <MyButton onClick={updateTodo}>Save</MyButton>
          </div>
        ) : (
          <span className={todo.status ? s.completed : ''}>{todo.title}</span>
        )}
      </div>

[szQocks]

Даша Циклаури, понял, ты права, чёт я editMode не учёл))

preventDefault нужно потому что как ты и сказала onMouseDown отрабатывает быстрее чем blur, а в обработчике на кнопке можно вызвать preventDefault - для того что бы отменить событие, как будто его и не происходило, но коллбэк отработает

если подробнее интересно то почитай о event.cancelable

[Даша Циклаури]

szQocks, не понимаю зачем в данном случае отменять событие как будто его не происходило?

[szQocks]

Даша Циклаури, что бы при клике на кнопку blur не отработал вообще, но это уже не важно, так как я уже и сказал я не учёл условную отрисовку, грубо говоря моя невнимательность

[Даша Циклаури]

szQocks, ты совсем чего-то запутался, это разные события у кнопки и у поля ввода. onBlur отрабатывает, вот проверочный код и флаг defaultPrevented = false

export default function App() {
  const [value, setValue] = React.useState("defaul");

  const clickHandler = (e) => {
    e.preventDefault();
    console.log('test');
  };

  const onBlur = (e) => {
    console.log('on blur', e.defaultPrevented);
  };

  return (
    <div className="App">
      <input
        value={value}
        onChange={() => setValue("change")}
        onBlur={onBlur}
        onFocus={() => setValue("focus")}
      />
      <button onMouseDown={clickHandler}>button</button>
    </div>
  );
}

[szQocks]

Даша Циклаури, мне больше нечего добавить, наверное ты проверяла не верно, всё так как я и описал

console.log('on blur', e.defaultPrevented);

- оно и не должно быть отменено

как я уже и сказал - представь что был клик по кнопке - но его небыло, за это отвечает e.cancelable

[szQocks]

Даша Циклаури, просто сделай фокус на инпут, а потом кликни на кнопку - blur не вызовиться

Answer 2

[szQocks]

Просто используй preventDefaultв updateTodo