React에서 하위 구성 요소에 이벤트 처리기를 전달하는 방법

Question

내 애플리케이션에서 일부 스타일을 추상화 한 React에서 만든 <Button /> 구성 요소가 있습니다. 두 가지 다른 상황에서 사용하고 있습니다. 하나는 로그인 양식을 제출하고, 다른 하나는 등록 페이지 (및 앞으로 다른 컨텍스트)로 이동하는 것입니다.

부모 구성 요소의 이벤트 처리기를 <Button />으로 전달하는 방법을 알아 내려고합니다. 로그인 폼에 onSubmit 처리기를 호출하고 싶지만 탐색 버튼에는 onClick 처리기를 호출하고 싶습니다. 이것이 가능한가? 나는 또한 단지 구성 요소가로드 될 때 실행하는 기능을 유발하는 화살표 기능을 제거하려고했습니다

<Button text={callToAction} style={styles.callToActionButton} onClick={() => FlowRouter.go("Auth")}/> 

<Button text="Go!" style={styles.registerButton} onSubmit={() => this.register(this.state.user, this.state.password)}/> 

:

는이 같은 구성 요소를 호출 시도

// executes event handlers on page load 
<Button text={callToAction} style={styles.callToActionButton} onClick={FlowRouter.go("Auth")}/> 

<Button text="Go!" style={styles.registerButton} onSubmit={this.register(this.state.user, this.state.password)}/> 

Answer 1

는 A 태그에 다음

_onClick: function(e) { 
    if (!this.props.onClick) { 
    return; 
    } 
    this.props.onClick(e); 
} 

와, 당신은에 온 클릭 핸들러를 전달할 수 있습니다 그것을 속성으로 전달하여 버튼 클래스. 이렇게하면 버튼 구성 요소의 propType을 간단히 정의하여 필수 소품을 만들 수 있습니다. 예를 들어

, 나는, 당신이 일반적으로 사용하고있는 버튼의 방법을 제출하지 것, 그것은

var StyledButton = React.createClass({ 
 
    propTypes: { 
 
    // the StyledButton requires a clickHandler 
 
    clickHandler: React.PropTypes.func.Required, 
 
    // and I guess the text can be seen as required as well 
 
    text: React.PropTypes.string.required 
 
    }, 
 
    render: function() { 
 
    // as you are sure you have a clickHandler, you can just reference it directly from the props 
 
    return <button type="button" onClick={this.props.clickHandler}>{this.props.text}</button>; 
 
    } 
 
}); 
 

 
var MyForm = React.createClass({ 
 
    getInitialState() { 
 
    return { 
 
     clicked: 0 
 
    }; 
 
    }, 
 
    click() { 
 
    this.setState({clicked: this.state.clicked+1}); 
 
    \t alert('ouch'); 
 
    }, 
 
    secondClickHandler() { 
 
    this.setState({clicked: 0}); 
 
    alert(':('); 
 
    }, 
 
    render() { 
 
    // your parent component simply sets which button 
 
    return <fieldset> 
 
     <div> 
 
    \t <StyledButton clickHandler={this.click} text="Click me" /> 
 
      { (this.state.clicked > 0) && <StyledButton clickHandler={this.secondClickHandler} text="Not again" /> } 
 
     </div> 
 
    </fieldset>; 
 
    } 
 
}); 
 

 
ReactDOM.render(
 
    <MyForm />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> 
 
<div id="container"> 
 
    <!-- This element's contents will be replaced with your component. --> 
 
</div>

또한 작동하는 방법을 보여줍니다 작은 조각을 추가 당신은 오히려 것 수신 된 데이터를 웹 서비스로 보내고 결과가 수신되면 변경 사항을 처리합니다. 제출은 현재 웹 사이트를 죽이고 모든 것을 새로로드해야하지만 Ajax 호출이나 상점에서는 결과를 기다린 다음 응답을 기반으로 사용자를 리디렉션합니다.

Answer 2

어떻게 처리했는지 우리는 태그를 렌더링 한 버튼 컴포넌트를 가지고 있습니다. 그러면 href prop와 전달할 수있는 onClick prop가 있습니다. 링크가 href prop에서 버튼으로 전달되고 원하는 경우 그것은 onClick 프로에서 함수를 전달하기 만하면됩니다. p 태그에 설정되었는지 확인하십시오. Button 구성 요소 우리는 또한 설정과 같습니다 정의의 onclick 기능에서

: 일반적으로

<a href={this.props.href} onClick={this._onClick} />