每次点击进行反应时如何附加标签？

Question

我想在每次点击+按钮时输出一个标签。我得到它输出一个。但现在我完全被难倒了。这是我的主要内容。

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;

这是我想点击以附加输入的组件按钮。

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

const AddTab = props => {

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

export default AddTab;

供参考，这是我的inputtab，我想在每次点击时输出。 我希望我足够清楚。提前感谢您的帮助。

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

理想的方法是将状态数组存储在状态中，然后在该数组上map()以呈现多个InputTabs：

＆＃13;

＆＃13;

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'));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以在App状态下保留一个简单的标签整数计数器，并在点击AddTab按钮时增加它。然后，您只需为状态中存储的InputTab到0的每个数字呈现一个counter。

＆＃13;

＆＃13;

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'));

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;