Как получить значение кнопки при распространении события

Question

Я делаю компонент кнопки реагирования, и этот компонент выглядит так

const Button = props => {
  return (
    <button
      style={props.style}
      onClick={props.onClick}
      className={`btn ${props.color} ${props.loading &&
        "loading"} ${props.block && "block"} ${props.className}`}
      disabled={props.disabled}
      type={props.type}
      value={props.value}
    >
      <span className={"content"}>
        {props.icon && <span className={"icon-left"}>{props.icon}</span>}
        {props.children}
      </span>
      {props.loading ? <Spinner /> : null}
    </button>
  );
};

Проблема возникает, когда я пытаюсь добавить значение prop и прослушиватель событий для компонента кнопки.Если я делаю это и пытаюсь получить значение event.target.value из обработчика onClick, оно начинает работать только тогда, когда я щелкаю по другим частям кнопки, щелкнув текст диапазона, получим undefined

Это кажется логичнымтак как в промежутке нет значения, как лучше всего это исправить?

Answer 1

Вы должны использовать event.currentTarget вместо event.target

Свойство события currentTarget возвращает элемент, событие которого слушатели вызвали событие.

Подробнее о здесь .

Answer 2

Использование event.currentTarget .

Добавить атрибут data-value к span. Так что по клику получите event.currentTarget.value или event.currentTarget.dataset.value

Внутри обработчика сделай так

 let m = event.currentTarget.value? 
         event.currentTarget.value:
         event.currentTarget.dataset.value