Question

我是JS的新手，所以有人可以帮我解决React JavaScript中的以下问题并解释如何执行以下操作吗？

我希望创建一个程序，列出所有可用的DB记录（信用卡项目）或向DB添加新项目（新注册的卡片）。

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

点击按钮后，很遗憾，我不知道如何调用给定的类（ExistingCardList.js或NewCard.js）来继续。

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

我写过这样的话：

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>
    )
}

非常感谢！

Answer 1

您可以设置一个布尔状态，因此在此状态下您可以显示您的组件。

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>
    )
  }
}

希望这会有所帮助

Answer 2

您是否在当前文件中导入了引用的类？

import ExistingCardList from './ExistingCardList'
import NewCard from './NewCard'

这些类是否也在其中声明了render()个方法？

Answer 3

要在用户操作后显示/隐藏组件，您可以执行类似

的操作

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>
        )
    }
}

如果您需要任何进一步的信息，请与我们联系。

如何从React JS中的函数引用另一个类？

3 个答案: