gpt4 book ai didi

javascript - 如何从 React JS 中的函数引用另一个类?

转载 作者:行者123 更新时间:2023-12-03 02:21:40 28 4
gpt4 key购买 nike

我对 JS 比较陌生,所以有人可以帮助我解决 React JavaScript 中的以下问题并解释如何执行以下操作吗?

我希望创建一个程序,列出所有可用的数据库记录(信用卡项目)或向数据库添加新项目(新注册的卡)。

我创建了 3 个 JS 类,一个用于列出已注册的项目,一个用于添加新项目,第三个有 2 个按钮,用户可以选择使用现有卡或新卡付款。

点击按钮后,遗憾的是我不知道如何调用给定的类(ExistingCardList.jsNewCard.js)来继续。

我用黄色标记了受影响的类:图片

enter image description here

我写过这样的东西:

export default class CreditCardForm extends React.Component {
constructor (props) {
super(props)

this.handleExistingCard = this.handleExistingCard.bind(this)
this.handleNewCard = this.handleNewCard.bind(this)
}

handleExistingCard() {
return(
<ExistingCardList /> )
}

handleNewCard = () => {
//return(
<NewCard />
}

render() {
return (
<div>
<Form>
<FormGroup>
<Button style={{ margin: 50, marginLeft: 300, paddingLeft: 100, paddingRight: 100 }} onClick={this.handleExistingCard} >Pay with existing card</Button>
<Button style={{ paddingLeft: 100, paddingRight: 100 }} onClick={this.props.handleNewCard}>Pay with a still not registered card</Button>
</FormGroup>
</Form>
</div>
)
}

非常感谢!

最佳答案

您可以设置一个 bool 状态,以便在此状态下您可以显示您的组件。

export default class CreditCardForm extends React.Component {
constructor (props) {
super(props)
this.state = {
isNewCard: false
}
this.handleExistingCard = this.handleExistingCard.bind(this)
this.handleNewCard = this.handleNewCard.bind(this)
}

handleExistingCard() {
this.setState({ isNewCard: false });
}

handleNewCard = () => {
this.setState({ isNewCard: true })
}


render() {
return (
<div>
<Button onClick={this.handleExistingCard} >Pay with existing card</Button>
<Button onClick={this.handleNewCard}>Pay with a still not registered card</Button>
<div>
{this.state.isNewCard ?
<NewCard />
:
<ExistingCardList />
}
</div>
</div>
)
}
}

希望这会有所帮助

关于javascript - 如何从 React JS 中的函数引用另一个类?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49129976/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com