React에서 대상 HTML 요소의 색상을 가져옵니다.

Question

반응을 사용하여 html 요소의 색상을 가져 오려고 시도합니다. 내 redux 액션/감속기로 전달합니다.

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

콘솔/REDUX 콘솔은 모든 스타일에 대한 빈 값을 반환합니다.

나는 react-css-modules/css-modules를 사용하고 있으며, 이것이 내가 생각할 수있는 유일한 예외입니다.

어떤 아이디어라도 환영합니다. 감사합니다.

편집 :이 유래 질문에 대한 지점 특별히 만들었습니다 https://github.com/CharlieGreenman/pixelLight/tree/stackoverflow-37583025

참고 :이 응용 프로그램의 데이터 흐름, 동적 응용 프로그램의 나머지 부분을 채 웁니다 단일 정적 값이 있다는 것입니다 . 이에 대한 제안으로, 많은 생각을 한 후, 이것이 앱을 설계하는 적절한 방법이라고 판단했습니다.

Answer 1

는 결국, 나는

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

,369을 사용

그리고 적절한 값을 얻을 수있게 해주었습니다. 나는 이것이이 응용 프로그램에서 진행되는 두 가지 결과로 가정합니다.

1. 스타일 태그가 HTML에 직접 삽입됩니다. webpack-dev-server 또는 react-css-modules의 결과로 100 %가 아닙니다.
2. 스타일은 반응 앱이 초기화 된 후 적절한 설정이 적용된 후에 만 ​​적용됩니다.

그래서이 상황에서 계산 된 스타일을 얻는 것은 나를 위해 무엇을했는지입니다. 나는 여전히 세부 사항을 조사하는 중이다. 고맙습니다.

Answer 2

ref를 사용하여 신뢰할 수있는 요소 참조를 할 수 있습니다.

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