单击时添加新组件（按钮）答案

【问题标题】：Adding new Component(Button) on click单击时添加新组件（按钮）
【发布时间】：2017-10-28 22:23:00
【问题描述】：

这是一个 TODO 应用。当我点击一个按钮时 - 它要求输入文本并将其放在按钮标签中，并且它必须创建一个空按钮，在单击时会要求输入文本并创建另一个按钮等。

出现两个按钮，但是当我单击一个并在其中输入文本时 - 出现文本，但未创建新按钮。请帮忙

import React, { Component } from 'react';
import ReactDOM from "react-dom";

class TaskButton extends Component {
constructor(props) {
    super(props);
    this.state = {
        taskName: "Undefined"
    };
}

addTask = () => {
        var taskText = prompt('What to write ?', "");
        TASKS.push()
        this.setState({
            taskName: taskText
        })
};

render() {
    return (
        <button onClick={this.addTask}>
         {this.state.taskName}
        </button>
      );
    }
  };


var test = [
<div> <TaskButton> </TaskButton> </div>, 
<div> <TaskButton> </TaskButton> </div>
];

var listItems = test.map((test, index) =>
<li key={index}>{test}</li>
);
class TaskMenu extends Component {
    render() {
        return (
            <ul>
                {listItems}
            </ul>
        )    
    }
}

ReactDOM.render(
    <TaskMenu />,
    document.getElementById("root")
);

export default TaskMenu;

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

使用以下代码

class TaskMenu extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tasks: ["undefined"]
    };
    this.addTask = this.addTask.bind(this);
  }
  addTask(e){
    var task = prompt('What to write ?', "");
    var index = e.target.getAttribute("data-index");
    this.state.tasks[index] = task;
    this.setState({tasks: +index=== this.state.tasks.length-1 ? [...this.state.tasks, "undefined"]: [...this.state.tasks]});
  };
  render() {
    return (
      <ul>
        {this.state.tasks.map((task, i)=><li key={i}> <button onClick={this.addTask} data-index={i}>{task}</button> </li>)}
      </ul>
    )
  }
}


ReactDOM.render(
    <TaskMenu />,
    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>
<html>
<body>
<div id ="root"></div>
</body>
</html>

【讨论】：