每次单击反应时如何添加标签？

Question

I want to output one tab everytime I click on the + button. I got it to output one. But now I am completely stumped. Here is My main component.

import React, { Component } from 'react';
import './App.css';
import InputTab from './components/tabs/InputTabs/InputTab';
import AddTab from './components/tabs/IncrementTabs/AddTab';

class App extends Component {

  state = {
    elementlist: ""
  }

  AddComponentHandler = event =>{

    this.setState(
      {elementlist: <InputTab/>}
    );
  }

  render() {
    return (
      <div>
        {this.state.elementlist}
        <AddTab AddComp = {this.AddComponentHandler.bind(this)}
        list = {this.state.elementlist}/>
      </div>
    );
  }
}

export default App;

here is the component button which I want to click to append the input.

import React from 'react';
import './AddTab.css';

const AddTab = props => {

    return(
        <div onClick = {props.AddComp}
        className = "addTab">
            +
        </div>
    );
}

export default AddTab;

And for reference, here is my inputtab which I want to output everytime i click. i hope i am being clear enough. Thank you in advance for help.

import React from 'react';
import './InputTab.css';

const InputTab = props => {
    return(
            <div className = "tabContainer">
                <input className = "inputTabName"/>
                <div className = "weightBox">
                    <input className = "inputTabWeight"/>%
                </div>
            </div>
    );
}

export default InputTab;

Answer 1

The ideal way would be to store an array of data in state, and then map() over that array to render out multiple InputTabs :

 class App extends React.Component { state = { elementlist: [] } AddComponentHandler = event => { this.setState( prevState => ({ elementlist: prevState.elementlist.concat([Date.now()]) })); } render() { return ( <div> {this.state.elementlist.map( el => <InputTab /> )} <AddTab AddComp={this.AddComponentHandler} /> </div> ); } } const AddTab = props => { return( <div onClick = {props.AddComp} className = "addTab"> + </div> ); } const InputTab = props => { return( <div className = "tabContainer"> <input className = "inputTabName"/> <div className = "weightBox"> <input className = "inputTabWeight"/>% </div> </div> ); } ReactDOM.render(<App/>, document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div> 

Answer 2

You can just keep a simple integer counter of tabs in App state and increase it when click on AddTab button. Then you can just render one InputTab for each number from 0 to counter stored in state.

 class App extends React.Component { state = { elementsCounter: 0 } AddComponentHandler = event => { this.setState( prevState => ({ elementsCounter: prevState.elementsCounter + 1 })); } render() { return ( <div> {[...Array(this.state.elementsCounter).keys()].map( index => <InputTab key={index} /> )} <AddTab AddComp={this.AddComponentHandler} /> </div> ); } } const AddTab = props => { return( <div onClick = {props.AddComp} className = "addTab"> + </div> ); } const InputTab = props => { return( <div className = "tabContainer"> <input className = "inputTabName"/> <div className = "weightBox"> <input className = "inputTabWeight"/>% </div> </div> ); } ReactDOM.render(<App/>, document.getElementById('root')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>