reactjs - 在父组件中单击渲染新组件

Question

我有一个名为 CreateTicket 的按钮组件和一个我想在单击时呈现的名为 IndividualTicketInput 的组件。我创建了一个父组件，目前我拥有这两个组件。我需要一个函数，在第一个 IndividualTicketInput 下方的父组件中单击时呈现一个新的票证组件，依此类推。我知道我必须插入门票数组，但我仍在学习 react 并且难以理解这些概念。您最好如何解决这个问题，如果您需要我澄清，请告诉我。

按钮组件

var CreateTicket = React.createClass({
  getInitialState: function() {
    return{};
  },
  render: function() {
    return(
      <button type="button" className="add-another-ticket">
        +Add Ticket
      </button>
    );
  }
})

票证组件**(这是我想在点击时呈现的组件)

var IndividualTicketInput = React.createClass({
  getInitialState: function() {
    return { ticket: {name: '', quantity: '', price: null} };
  },
  render: function() {
    return (
      <ul>
        <li>
          <label>Ticket Name</label>
          <input className="ticket-name" type="text" placeholder="E.g. General Admission" value={this.state.ticket.name} />
        </li>
        <li>
          <label>Quantity Available</label>
          <input className="quantity" type="number" placeholder="100" value={this.state.ticket.quantity} />
        </li>
          <li>
            <label>Price</label>
            <input className="price" type="number" placeholder="25.00" value={this.state.ticket.price} />
          </li>
        <li>
          <button type="button" className="delete-ticket" onClick={this.deleteTicket}><i className="fa fa-trash-o delete-ticket"></i></button>
        </li>
      </ul>
    );
  }
});

门票组件

var Tickets = React.createClass({
  getInitialState: function() {
    return {tickets: [] };
  },
  createNewTicket: function() {

    // where the push happens on click to create the new IndividualTicketInput component

    // this is what I am currently trying but it isn't working
    var tickets = this.state.tickets;
     this.state.tickets.push(
      <IndividualTicketInput />
    )
    this.forceUpdate();

  },
  render: function() {
    return (
      <div>
        <IndividualTicketInput />
        // new component will render here
        <div>{this.state.tickets}</div>
        <CreateTicket onClick={this.createNewTicket} />
      </div>
    );
  }
});

Answer 1

可以正常工作了。将 Prop 附加到子按钮组件，然后使用推送传递到该组件。

按钮组件

var CreateTicket = React.createClass({
  getInitialState: function() {
    return{};
  },
  render: function() {
    return(
      <button type="button" onClick={this.props.createTicket} className="add-another-ticket">
        +Add Ticket
      </button>
    );
  }
})

门票组件:

var Tickets = React.createClass({
  getInitialState: function() {
    return {
      tickets: []
    }
  },
  componentDidMount: function() {
    console.log('this mounted')
  },
  onClick: function() {
    this.state.tickets.push(
      <IndividualTicketInput />
    )
    this.forceUpdate();
  },
  render: function() {
    return (
      <div>
        <IndividualTicketInput />
        {this.state.tickets}
        <CreateTicket createTicket={this.onClick} />
      </div>
    );
  }
});

我现在遇到的唯一问题是关键情况，但我会解决的。感谢所有看过此内容的人。