如何解决用于支付的 react-stripe-js 按钮始终处于禁用状态
我正在尝试遵循 react-stripe-js 文档中的基本示例，但是，我遇到了一个我已经有一段时间无法弄清楚的问题。
我的条纹“付款”按钮始终处于禁用状态，即使我输入从条纹测试页面获得的信息 - https://stripe.com/docs/testing。
我的组件：
CheckoutForm 和 InjectedCheckoutForm
import React from 'react';
import ReactDOM from 'react-dom';
import {loadStripe} from '@stripe/stripe-js';
import {CardElement,Elements,ElementsConsumer} from '@stripe/react-stripe-js';
class CheckoutForm extends React.Component {
handleSubmit = async (event) => {
event.preventDefault();
const {stripe,elements} = this.props;
const {error,paymentMethod} = await stripe.createPaymentMethod({
type: 'card',card: elements.getElement(CardElement),});
};
render() {
const {stripe} = this.props;
return (
<form onSubmit={this.handleSubmit}>
<CardElement/>
<button type="submit" disabled={!stripe}>
Pay
</button>
</form>
);
}
}
export const InjectedCheckoutForm = () => (
<ElementsConsumer>
{({stripe,elements}) => (
<CheckoutForm stripe={stripe} elements={elements} />
)}
</ElementsConsumer>
);
export default CheckoutForm;
ViewMembers.js 可以很好地呈现 Elements 和 Injected Checkout 表单。
我对 ViewMembers 组件进行了一些更改以尝试新的内容。我将一个状态值设置为 null，并且在生命周期方法 componentDidMount() 中，我正在从条带中分配我正在使用的 promise 对象，现在当我为这个状态值执行 console.log() 时，我也得到了兑现了承诺，但由于某种原因，这个承诺没有作为道具发送到我的 Elements 组件，因为我在 CheckOutForm 中的按钮仍然被禁用。
*另一个编辑。
实际上，promise 对象正在发送，我可以在使用 React Dev Debug 工具时看到我的 API 密钥，但是即使 stripe 的 prop 接收到正确的值，按钮仍然处于禁用状态。
class ViewMembers extends React.Component {
constructor(props) {
super(props)
this.state = {
members: [],isModalClicked: false,isModalClickedEdit: false,emptyList: false,id: 0,showStripe: false,stripePromise: null
}
this.openModal = this.openModal.bind(this);
this.closeModal = this.closeModal.bind(this);
this.openMoDaledit = this.openMoDaledit.bind(this);
this.closeMoDaledit = this.closeMoDaledit.bind(this);
}
openModal(e) {
e.preventDefault();
console.log("the modal is being opened");
this.setState({
isModalClicked: true,},() => {
console.log("this state id",e.target.value);
console.log("this state id",this.state.id);
})
}
openMoDaledit(e) {
e.preventDefault();
console.log("Edit modal is being opened");
this.setState({
isModalClickedEdit: true,id: e.target.value
},this.state.id);
console.log("this state id",this.state.id);
})
}
closeMoDaledit(e) {
e.preventDefault();
console.log("Edit modal is being closed");
this.setState({
isModalClickedEdit: false
})
}
closeModal(e) {
e.preventDefault();
console.log("The modal is being closed");
this.setState({
isModalClicked: false
})
}
fetchingMembers = () => {
var id = this.props.id;
console.log("this props",this.props.id);
axios.get(`https://localhost:44345/api/gyms/${id}/members/`)
.then(res => {
const members = res.data;
this.setState({ members });
console.log("Members",members);
})
.catch(err => {
console.log(err);
})
}
openPaymentStripe = (e) =>{
e.preventDefault();
this.setState({ showStripe: true })
}
async componentDidMount() {
this.fetchingMembers();
const stripePromise = await loadStripe('stripekey');
console.log('stripe promise',stripePromise)
this.setState({
stripePromise: stripePromise
})
}
componentDidUpdate(prevProps) {
if (this.props.id !== prevProps.id) {
axios.get(`https://localhost:44345/api/gyms/${this.props.id}/members/`)
.then(res => {
const members = res.data;
this.setState({ members });
console.log("members",members);
})
.catch(err => {
console.log(err);
})
}
}
renderTableData() {
if (this.state.members) {
return this.state.members.map((member) => {
return (
<TableRow key={member.id}>
<TableCell>
<label for="memberName">Member Name: {member.memberName}</label>
</TableCell>
<TableCell>
<label for="memberName">Member SurName: {member.memberSurName}</label>
</TableCell>
<TableCell>
<label for="memberName">Member Active Status: {member.isActive.toString()}</label>
</TableCell>
<TableCell>
<button value={member.memberID} onClick={this.openMoDaledit}>Edit Member</button>
{/* <EditMember isModalClickedEdit={this.state.isModalClickedEdit} takeClickEdit={this.closeMoDaledit} GymId={this.props.id} MemberId={this.state.id}/> */}
</TableCell>
<TableCell>
<button value={member.memberID} onClick={this.openModal}>Add Member</button>
<AddMember isModalClicked={this.state.isModalClicked} isModalHidden={this.state.isModalClicked} takeClick={this.closeModal} GymId={this.props.id} onAddMember={this.fetchingMembers}/>
</TableCell>
</TableRow>
)
})
}
}
render() {
if (this.state.isModalClickedEdit){
return (
<EditMember isModalClickedEdit={this.state.isModalClickedEdit} takeClickEdit={this.closeMoDaledit} GymId={this.props.id} MemberId={this.state.id} onEditMember={this.fetchingMembers}/>
)
}
if (this.state.showStripe){
const stripePromiseData = this.state.stripePromise;
console.log('stripePromiseData',stripePromiseData)
return (
<>
<Elements stripe={stripePromiseData}>
<InjectedCheckoutForm />
</Elements>
</>
)
}
const emptyList = this.state.members.length;
if (emptyList == 0){
return (
<>
<CircularProgress color="secondary"/>
<button onClick={this.openModal}>Add Member</button>
<br/>
<br/>
<button color="primary" onClick={this.openPaymentStripe}>Purchase Membership</button>
<AddMember isModalClicked={this.state.isModalClicked} isModalHidden={this.state.isModalClicked} takeClick={this.closeModal} GymId={this.props.id} onAddMember={this.fetchingMembers}/>
</>
)
}
return (
<div class="container" className="listofGyms">
<div class="row">
<div class="col-sm-6">
<h2>List of Members</h2>
</div>
</div>
<Table id='gyms' class="table table-purple">
<TableBody>
{this.renderTableData()}
</TableBody>
</Table>
<button color="primary" onClick={this.openPaymentStripe}>Purchase Membership</button>
</div>
)
}
}
export default ViewMembers;```
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
