I am relative new with JS so can someone please help me with the below problem in React JavaScript and explain how to do the followings?
I wish to create a program which either list all the available DB records (credit card items) or add new items to DB (newly registered cards).
I have created 3 JS classes, one for listing the already registered items, one for adding new ones, and the third one with 2 buttons where user can choose either to pay with an existing card or with a new one.
After clicking the button, unfortunately I don't know how to call the given classes (either ExistingCardList.js
or NewCard.js
) to proceed.
I marked the affected classes with yellow: picture
I have written something like this:
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>
)
}
Thanks a lot!
You can set one boolean state so within this state you can show your component.
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>
)
}
}
Hope this will help
Have you imported the referred classes in the current file?
import ExistingCardList from './ExistingCardList'
import NewCard from './NewCard'
Also do those classes have render()
methods declared in them?
To display/hide a component after the user action you can do something like
import NewCard from './NewCard';
import ExistingCardList from './ExistingCardList';
Class Main extends React.Component{
state = {
option: false,
card: false // this will be changing to existing/new use this value for anything else
}
selectCard(card){
this.setState({card: card});
}
selectOption(option){
this.setState({option: option})
}
render(){
return (
<div className="payment">
<div className="options">
<ul>
<li onClick={this.selectOption.bind(this, 'card')}>Card</li>
<li onClick={this.selectOption.bind(this, 'paypal')}>PayPal</li>
</ul>
</div>
{this.state.option === 'card' && <div className="card-selector">
<div className="buttons">
<button onClick={this.selectCard.bind(this, 'existing')}>Pay with existing card</button>
<button onClick={this.selectCard.bind(this, 'new')}>Pay with a new card</button>
</div>
<div className="card">
{(this.state.card === 'new')? <NewCard /> : <ExistingCardList />;}
</div>
</div>}
</div>
)
}
}
Let me know if you need any further info.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.