Reactjs의 구성 요소에 대한 이벤트 처리기

Question

이것은 구성 요소에서 실행되지 않지만 div에 이벤트 처리기를 연결하면 작동합니다. 내 하위 구성 요소에 소품 유형 함수를 전달해야합니까? 당신은 기본적으로 무슨 짓을

는

const buttonStyle = { 
    color: 'red' 
}; 

class Button extends React.Component { 
    render() { 
     return (
      <a className="social-button twitter"> 
      <i href="#" className="fa fa-twitter"></i> 
      </a> 
     )}; 
} 

class PanelButtons extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    handleClick() { 
    console.log('this is:'); 
    } 

    render() { 
     return (
      <div> 
      <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/} 
      CLick me 
      </div> 
      <div className="social-buttons"> 
       <Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/} 
      </div> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(<PanelButtons />, document.querySelector('body')); 

Answer 1

의 Button 구성 요소에 onClick라는 콜백을 전달합니다. 구성 요소의 소품을 통해 액세스 할 수 있습니다. Button 구성 요소의 a 요소를 클릭하면

class Button extends React.Component { 
    render() { 
     return (
      <a className="social-button twitter" onClick={this.props.onClick}> 
      <i href="#" className="fa fa-twitter"></i> 
      </a> 
     )}; 
} 

, 당신이 전달 된 콜백이 발생됩니다 (그리고 handleClick가 호출된다).

Answer 2

<button />의 onClick은 예상대로 작동했을 것입니다.

그러나이 <Button />가 만든 구성 요소는 onClick은 그 handleClick 당신의 PanelButtons 구성 요소에 실제 온 클릭을 콜백합니다 아래처럼 버튼 구성 요소의 a 태그상의 onClick를 통해 호출 할 수있는 소품으로 전송됩니다.

const buttonStyle = { 
    color: 'red' 
}; 

class Button extends React.Component { 

    handleClick = (e) => { 
     this.props.onClick(e) 
    } 

    render() { 
     return (
      <a className="social-button twitter" onClick={this.handleClick}> 
      <i href="#" className="fa fa-twitter"></i> 
      </a> 
     )}; 
} 

class PanelButtons extends React.Component { 
    constructor(props){ 
    super(props); 
    } 

    handleClick() { 
    console.log('this is:'); 
    } 

    render() { 
     return (
      <div> 
      <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/} 
      CLick me 
      </div> 
      <div className="social-buttons"> 
       <Button onClick={(e) => this.handleClick(e)} />{/*does now work attaching it to a component*/} 
      </div> 
      </div> 
     ) 
    } 
} 

ReactDOM.render(<PanelButtons />, document.querySelector('body')); 

당신은 단지 각 버튼에 대한 PanelButtons에 onClick를 추가하려면

, 그냥 당신이 div 태그에 이벤트 리스너를 추가하여이 같은 조금 렌더링 수정합니다.

render() { 
    return (
     <div> 
     <div onClick={(e) => this.handleClick(e)}> {/*this works attaching it to a div*/} 
     CLick me 
     </div> 
     <div className="social-buttons" onClick={(e) => this.handleClick(e)}> 
      <Button />{/*does now work attaching it to a component*/} 
     </div> 
     </div> 
    ) 
} 

Answer 3

당신은 <Button /> 구성 요소에 소품을 통과해야

class Button extends React.Component { 
    render() { 
     return (
      <a className="social-button twitter" {...this.props}> 
      <i href="#" className="fa fa-twitter"></i> 
      </a> 
     )}; 
} 

더 읽기 : JSX spread attributes