ReactJs：同じコンポーネントを持つタブの個別の状態を維持する

Question

コンポーネント内のタブ構造を使用しています。両方のタブの内部に同じコンポーネントがあります。

[追加]ボタンをクリックすると、新しいコンポーネントがタブに追加されます。ここでは、タブを切り替えて、タブ2に移動します。コンポーネントも同じです。

私は以下のフィドルでシナリオを複製しようとしました。

https://jsfiddle.net/rzv6Lrjh/89/

var App = React.createClass({ 
    render: function() { 
    return (
     <div> 
     <Tabs selected={0}> 
      <Pane label="Tab 1"> 
      <Tickets/> 
      </Pane> 
      <Pane label="Tab 2"> 
      <Tickets/> 
      </Pane> 
     </Tabs> 
     </div> 
    ); 
    } 
}); 

Answer 1

[OK]を、あなたは単にあなたのチケット2枚の部品が異なることを理解反応するようにする必要がありので。

あなたは、単に最初のタブのために、このコンポーネント

<Tickets key="1/> 

にダミーのプロパティを追加することによって、これを達成することができ、第2の1のための

<Tickets key="2/> 

。完全な答えは小道具

var Tabs = React.createClass({ 
    displayName: 'Tabs', 
    propTypes: { 
    selected: React.PropTypes.number, 
    children: React.PropTypes.oneOfType([ 
     React.PropTypes.array, 
     React.PropTypes.element 
    ]).isRequired 
    }, 
    getDefaultProps: function() { 
    return { 
     selected: 0 
    }; 
    }, 
    getInitialState: function() { 
    return { 
     selected: this.props.selected 
    }; 
    }, 
    shouldComponentUpdate(nextProps, nextState) { 
    return this.props !== nextProps || this.state !== nextState; 
    }, 
    handleClick: function (index, event) { 
    event.preventDefault(); 
    this.setState({ 
     selected: index 
    }); 
    }, 
    _renderTitles: function() { 
    function labels(child, index) { 
     var activeClass = (this.state.selected === index ? 'active' : ''); 
     return (
     <li key={index}> 
      <a href="#" 
      className={activeClass} 
      onClick={this.handleClick.bind(this, index)}> 
      {child.props.label} 
      </a> 
     </li> 
    ); 
    } 
    return (
     <ul className="tabs__labels"> 
     {this.props.children.map(labels.bind(this))} 
     </ul> 
    ); 
    }, 
    _renderContent: function() { 
    return (
     <div className="tabs__content"> 
      {this.props.children[this.state.selected]} 
     </div> 
    ); 
    }, 
    render: function() { 
    return (
     <div className="tabs"> 
     {this._renderTitles()} 
     {this._renderContent()} 
     </div> 
    ); 
    } 
}); 

var Pane = React.createClass({ 
    displayName: 'Pane', 
    propTypes: { 
    label: React.PropTypes.string.isRequired, 
    children: React.PropTypes.element.isRequired 
    }, 
    render: function() { 
    return (
     <div> 
     {this.props.children} 
     </div> 
    ); 
    } 
}); 

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({ 
    render: function() { 
    return (
     <div> 
     {this.props.tickets} 
     <CreateTicket createTicket={this.props.onCreateTicket} /> 
     </div> 
    ); 
    } 
}); 

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 App = React.createClass({ 
    getInitialState: function() { 
     return { 
      tickets1: [(<IndividualTicketInput/>)], 
      tickets2: [(<IndividualTicketInput/>)] 
     } 
    }, 
    onCreateTicket1: function() { 
     this.state.tickets1.push(<IndividualTicketInput/>); 
    }, 
    onCreateTicket2: function() { 
     this.state.tickets2.push(<IndividualTicketInput/>); 
    }, 
    render: function() { 
     return (
     <div> 
      <Tabs selected={0}> 
       <Pane label="Tab 1"> 
        <Tickets tickets={this.state.tickets1} onCreateTicket={this.onCreateTicket1.bind(this)}/> 
       </Pane> 
       <Pane label="Tab 2"> 
        <Tickets tickets={this.state.tickets2} onCreateTicket={this.onCreateTicket2.bind(this)}/> 
       </Pane> 
      </Tabs> 
     </div> 
     ); 
    } 
}); 

ReactDOM.render(<App />, document.querySelector('.container'));