Как передать обработчик события дочернему компоненту в React

Question

У меня есть компонент <Button />, который я создал в React, который абстрагирует некоторые стили в моем приложении. Я использую его в двух разных контекстах: один для отправки формы для входа, а другой для перехода на страницу регистрации (и, возможно, в других контекстах в будущем).

Я пытаюсь выяснить, как передать обработчики событий из родительского компонента в <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

В общем, вы можете переадресовать обработчик OnClick для ваш класс кнопок, передав его как свойство. Вы можете создать необходимую опору, просто определяя propTypes для вашего компонента кнопки.

В качестве примера, я добавил небольшой фрагмент, который показывает, как она работает

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 и поддержка onClick, которую вы можете передать. Если ее ссылка просто передается в href prop на кнопку, и если вы хотите он должен выполнить функцию, просто передав ее в onClick pro p и убедитесь, что он установлен в тег.

В компоненте Button мы также настройки пользовательской функции OnClick, которая выглядит следующим образом:

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

, а затем на теге

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