Получить цвет целевого HTML-элемента в React

Question

Попытка получить цвет HTML-элемента с помощью реакции, чтобы перейти к моему редуксному действию / редуктору.

JSX

<div>
   <button styleName="css_toggle" id ="css" onClick {this.handleClick}>CSS</button>
</div>

Обработчик события

handleClick(e){
  const{dispatch} = this.props;
  console.log(`e.target: ${e.target.style}`);
  dispatch(CurrView(e.target.id, e.target.style.background));
}

Консоль / Консоль приставки возвращает пустые значения для всех стилей.

Я использую response-css-modules/css-modules, и это единственная аномалия, о которой я могу думать.

Любые идеи приветствуются, спасибо.

Изменить: я создал ветку специально для этого вопроса stackru: https://github.com/CharlieGreenman/pixelLight/tree/stackru-37583025

Примечание. Поток данных этого приложения состоит в том, что существует единственное статическое значение, которое заполняет остальную часть приложения, которая является динамической. В ответ на предложение (я), после долгих раздумий, я решил, что это правильный способ для разработки приложения.

Answer 1

В конце концов, я использовал

const backgroundStyle = window.getComputedStyle(e.target, null).getPropertyValue("background-color");

и это позволило мне получить правильное значение. Я бы предположил, что это как результат двух вещей, происходящих в этом приложении.

1. Теги стиля внедряются непосредственно в html. Не 100%, если это в результате работы webpack-dev-server или response-css-modules.
2. Стили применяются только после инициализации приложения реакции с соответствующими настройками.

Так что в этой ситуации получить вычисленный стиль - вот что сделало это для меня. Я все еще в процессе изучения конкретных деталей. Спасибо.

Answer 2

Вы можете использовать ссылки для надежной ссылки на элемент.

• https://facebook.github.io/react/docs/more-about-refs.html

JSX

<div>
    <button id ="css"
        styleName="css_toggle"
        onClick={this.handleClick}
        ref={(e) => { this.cssToggleButton = e; }}>
        CSS
    </button>
</div>

Обработчик события

handleClick() {
    const id = this.cssToggleButton.id;
    const background = this.cssToggleButton.style.background;
    this.props.dispatch(id, background);
}