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

问题描述：

这是一个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;

答

使用下面的代码

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>

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

相关推荐