Question

尝试使用react获取html元素的颜色，传递给我的redux action / reducer。

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));
}

Console / redux控制台返回所有样式的空值。

我正在使用react-css-modules / css-modules，这是我能想到的唯一异常。

非常欢迎任何想法，谢谢。

编辑：我专门针对此stackoverflow问题创建了一个分支：https://github.com/CharlieGreenman/pixelLight/tree/stackoverflow-37583025

注意：此应用程序的数据流是有一个静态值，它填充动态的应用程序的其余部分。作为对建议的回应，经过深思熟虑后，我认为这是构建应用程序的正确方法。

Answer 1

最后，我用了

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

这让我得到了合适的价值。我认为这是由于在这个应用程序中发生了两件事。

样式标签直接在html中注入。如果它是webpack-dev-server或react-css-modules的结果，则不是100％。
样式仅在应用应用初始化后应用，并应用适当的设置。

因此，在这种情况下，获取计算出的样式就是为我做的。我仍然在研究特定的细节。谢谢。

Answer 2

您可以使用refs来可靠地引用元素。

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);
}

在React中获取目标html元素的颜色

2 个答案: