Hinzufügen einer neuen Komponente (Schaltfläche) beim Klicken

Dies ist eine TODO-App. Wenn ich auf einen Knopf klicken - es für Text fragt und legt sie in Button-Beschriftung, und es muss eine leere Schaltfläche erstellen, die für Text fragen, wenn eine andere Taste usw.Hinzufügen einer neuen Komponente (Schaltfläche) beim Klicken

zwei Schaltflächen angezeigt geklickt und schaffen, aber wenn ich Klicken Sie auf einen Text und geben Sie einen Text ein - Text erscheint, aber neuer Button wird nicht erstellt. bitte helfen

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;

Quelle

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

Verwendung folgenden Code

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>

Quelle

2017-10-28 22:50:34

Hinzufügen einer neuen Komponente (Schaltfläche) beim Klicken

Antwort

Verwandte Themen