[英]How to render a component on button click in React?
我正在为一个项目使用 React 和 Material UI,并且正在实施付款方式。 我基本上会支持不同类型的付款方式,根据用户选择我想要显示一个表单,一旦用户填写表单并提交它,我想返回到我以前的视图。 我有一个看起来像这样的组件:
import React, { Component } from 'react';
import { List, ListItem } from 'material-ui';
import { Button } from '../../components';
import StripeForm from './stripe/form';
import PropTypes from 'prop-types';
class MyComp extends Component {
constructor(props) {
super(props);
this.state = {
paymentProviders: [],
indexOfClickedItem: -1,
};
this.onListItemClicked = this.onListItemClicked.bind(this);
this.onPayment = this.onPayment.bind(this);
}
onListItemClicked(paymentProvider, index) {
let paymentProviders = {
providerName: paymentProvider.ProviderName,
publicKey: paymentProvider.PublicKey,
};
this.setState({
paymentProviders: paymentProviders,
indexOfClickedItem: index,
});
}
onPayment() {
switch (this.state.paymentProviders.providerName) {
case "stripe":
// render the form for stripe payment
return ( <StripeForm /> );
case "paypal":
// render the form for paypal payment
default:
return null;
}
}
render() {
return (
<div>
<div>
<List>
{this.props.paymentProviders.map((pp, index) => {
return (
<ListItem key={pp.ProviderName}
primaryText={pp.ProviderName}
onClick={() => this.onListItemClicked(pp, index)}
/>
)
})}
</List>
</div>
<div>
<Button onClick={this.onPayment}
label="Pay" />
</div>
</div>
);
}
}
MyComp.propTypes = {
paymentProviders: PropTypes.array.isRequired,
};
export default MyComp;
因此,基本上,根据单击的 ListItem,我更新状态中的indexOfClickedItem
,然后还更新有关支付提供商的一些详细信息。 但是,我主要想要实现的是,当我的按钮被点击时,取决于选择了哪个支付提供商(意味着之前点击/选择了哪个列表),我想呈现另一个组件。 任何想法如何实现它?
您可以使用条件渲染。
首先在构造函数内部初始化一个变量来存储表单,并添加一个状态viewForm
来管理是否查看表单:
constructor(props) {
super(props);
this.state = {
paymentProviders: [],
indexOfClickedItem: -1,
viewForm: false
};
this.onListItemClicked = this.onListItemClicked.bind(this);
this.onPayment = this.onPayment.bind(this);
this.paymentForm = null; //this
}
单击按钮时,在选择付款模式时有条件地为其分配一个值,并更改状态以查看表单:
switch (this.state.paymentProviders.providerName) {
case "stripe":
this.paymentForm = <StripeForm/>
break;
case "paypal":
this.paymentForm = <PaypalForm/>
break;
default:
this.paymentForm = null;
}
this.setState({ viewForm: true });
.. 然后有条件地渲染它:
<div className='form-container'>
{(this.state.viewForm) ?
this.paymentForm : ''}
</div>
只需在您的渲染方法中添加一个条件,它会检查状态并在条件正确时渲染新组件:
render() {
// render payment provider component for selected provider
const {paymentProviders, indexOfClickedItem, paymentClicked} = this.state;
const selectedPP = paymentProviders && paymentProviders[indexOfClickedItem];
if (paymentClicked) {
// whatever mechanism you want to use to decide
// what to render for this payment provider...
const ComponentToRender = selectedPP.Component;
return (
<ComponentToRender
// unselects the item when the user finishes the payment
onComplete={() => this.setState({indexOfClickedItem: -1})}
prop1={"foo"}
/>
);
}
// if nothing selected, render list
return (
<div>
<div>
<List>
{this.props.paymentProviders.map((pp, index) => {
return (
<ListItem key={pp.ProviderName}
primaryText={pp.ProviderName}
onClick={() => this.onListItemClicked(pp, index)}
/>
)
})}
</List>
</div>
<div>
<Button onClick={this.onPayment}
label="Pay" />
</div>
</div>
);
}
您的onPayment
函数应该发出this.setState({paymentClicked: true})
来触发新的渲染路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.