如何在 reactjs 中单击按钮多次显示项目？

Question

As you can see I am displaying a checkbox along with its label on ta button click. At this moment I am only able to display one checkbox at a time. Is there a way to make it so I can display multiple?

import React, {Component} from 'react';
import './App.css';

class TodoBody extends Component {

    state = {
        buttonPress: false,
        checked: false
    };

    render() {
        return (
            <div style={{marginTop:'70px'}}>
                <div className="todo__body" style={{margin:'auto'}}>
                    <h1 style={{textAlign:'center', textDecoration:'underline'}}>To-do's</h1>
                    <div className="input-group mb-3">
                        <input type="text" className="form-control" placeholder="New Task" id="task" />
                        <div className="input-group-append">
                            <a className="btn btn-danger" type="button" onClick={this.addTask}>Add</a>
                        </div>
                    </div>
                    {this.state.buttonPress? 
                        [
                            <div style={{float:'left', paddingLeft:'25px'}} className="checkbox-container">
                                <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"/>
                                <label class="form-check-label" for="defaultCheck1">{document.getElementById('task').value}</label>
                            </div>
                        ]
                    : <span/>}
                </div>
            </div>
        );
    }

    addTask = () => {
        this.setState({buttonPress:true});
    }
}

export default TodoBody;

Answer 1

Firstly, make a seperate component for checkbox, in this case name it Checkbox . You can try to create an empty array as initial state. Then just add to it for every button click. Then map the array in your render method, call Checkbox component for each:

import React, { Component } from 'react';
import './App.css';

const Checkbox = () => {
  return (
    <div style={{ float: 'left', paddingLeft: '25px' }} className="checkbox-container">
      <input class="form-check-input" type="checkbox" value="" id="defaultCheck1" />
      <label class="form-check-label" for="defaultCheck1">{document.getElementById('task').value}</label>
    </div>
  );
}

class TodoBody extends Component {

  state = {
    tasks: [],
    checked: false
  };

  addTask = () => {
    const tasks = this.state.tasks;
    this.setState({ tasks: [ tasks.length, ...tasks ] });
  }

  render() {
    return (
      <div style={{ marginTop: '70px' }}>
        <div className="todo__body" style={{ margin: 'auto' }}>
          <h1 style={{ textAlign: 'center', textDecoration: 'underline' }}>To-do's</h1>
          <div className="input-group mb-3">
            <input type="text" className="form-control" placeholder="New Task" id="task" />
            <div className="input-group-append">
              <a className="btn btn-danger" type="button" onClick={() => this.addTask()}>Add</a>
            </div>
          </div>
          {!!this.state.tasks.length ?
            this.state.tasks.map((task, i) => <Checkbox key={i} />)
            : <span />}
        </div>
      </div>
    );
  }
}

export default TodoBody;