Reactjs - 렌더링 구성 요소에 온 클릭을 적용 할 수 없습니다

Question

나는 반작용 클래스 구성 요소 내부에 다음과 같은 코드가있는 경우 :

 <svg viewBox="-100 -100 600 500" id='renderName' > 
      <Initial value={this.props.value.substring(0,1)} /> 
     </svg> 

난 단지 컨테이너 SVG에서 onClick 이벤트를 해고 할 수있을 것, 그리고를 'Initial'구성 요소에서 렌더링 중입니다.

예.

 <svg viewBox="-100 -100 600 500" id='renderName' onClick={this._onButtonClick} > 

^이 될 수없는 이유

 <Initial value={this.props.value.substring(0,1)} onClick={this._onButtonClick} /> 

이^

어떤 생각을 작동하지 않습니다 작동? 'onClick'이 함수를 호출하는 대신 소품으로 전달되는 것과 관련이 있습니까?

업데이트 : Initial이 다른 구성 요소 내에 렌더링됩니다. 이 구성 요소에는 onClick을 사용하여 호출 할 함수가 있습니다. 코드에서

Answer 1

Initial 는 구성 요소, 그리고 요소, 그래서 당신은 렌더링하는 실제 요소에이 구성 요소가 얻는 onClick 속성을 통과해야합니다

class Initial extends React.Component { 

    render() { 
     return <rect 
        ... 
        ... 
        onClick={this.props.onClick} 
       /> 
    } 
}