我在React中创建了一个
通常,您可以将 onClick 处理程序作为属性传递给按钮类,并将其转发到该类。您可以通过定义 button 组件的 propTypes 来使其成为必需的 prop。
作为示例,我添加了一个小片段来展示它是如何工作的。
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});
alert('ouch');
},
secondClickHandler() {
this.setState({clicked: 0});
alert(':(');
},
render() {
// your parent component simply sets which button
return <fieldset>
<div>
<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>
一般情况下,您不会使用按钮的提交方法,而是将收到的数据发送到Web服务,并在接收到结果时处理任何更改。提交会关闭当前网站并需要重新加载所有内容,而使用ajax调用或存储,则可以等待结果,然后根据响应重定向用户。
_onClick: function(e) {
if (!this.props.onClick) {
return;
}
this.props.onClick(e);
}
<a href={this.props.href} onClick={this._onClick} />
{this.register}
,在该注册方法中获取用户状态即可(无需作为参数传递)。 - Icepickle