單擊時添加新組件（按鈕）

這是一個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;

來源

2017-10-28 Тимур Хасанов

使用下面的代碼

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>

來源

2017-10-28 22:50:34

單擊時添加新組件（按鈕）

回答

相關問題