React implementiert das Hinzufügen, Löschen, Ändern und Abfragen von Todolists

 importiere React, { PureComponent } von 'react'
Eingabe aus „./components/Input“ importieren
Liste aus „./components/List“ importieren
importiere Total aus './components/Total'
Importiere Maske aus „./components/Mask“
importiere { bus als $bus } von './components/bus'
importiere './App.css'
exportiere Standardklasse App erweitert PureComponent {
  Konstruktor() {
    super()
    dieser.Zustand = {
      Flagge: falsch,
      Liste: [
        {
          ID: 1,
          Inhalt: 'Hahaha',
          geprüft: false
        },
        {
          Ich würde: 7,
          Inhalt: 'Hahaha',
          geprüft: false
        },
        {
          ID: 5,
          Inhalt: 'Hahaha',
          geprüft: false
        },
      ],
      checkAll: false,
      Länge auswählen: 0,
      Artikel: {}
    }
  }
  // Alles auswählen oder Auswahl aller abwählen checkAllHandler(checked) {
    console.log("geprüft",geprüft);
    const { list } = dieser.Zustand
    const neueListe = Liste.Map(Element =>{
      returniere {...item,checked}
    })
    dies.setState({Liste:neueListe,checkAll:geprüft},()=>{
      dies.doneLength()
    })
  }
  // Einzelauswahl, Einzelauswahl checkHandler =(id,checked)=> {
    const { list } = dieser.Zustand
    const neueListe = Liste.Map(Element => {
      returniere item.id === ID ? {...item,checked} : Artikel
    })
    let checkAll = neueListe.Länge und neueListe.jedes(Element => Element.geprüft)
    this.setState(() => ({Liste: neueListe,allesprüfen}),()=>{
      dies.doneLength()
    })
  }
  // hinzufügen addHandler = (obj)=>{
    lass { Liste } = diesen.Zustand;
    let neueListe = [...Liste,Objekt]
    console.log('neueListe===='+neueListe)
    dies.setState({
      Liste: neueListe,
    },()=>{
      dies.doneLength()
    })
  } 
  // Suche searchHandler=(content)=>{
    console.log("Inhalt",Inhalt);
    lass { Liste } = diesen.Zustand;
    let newList = Liste.Filter(Element => Element.Inhalt.Includes(Inhalt))
    dies.setState({
      Liste: neueListe
    },()=>{
      dies.doneLength()
    })
  }
  // Löschen delHandler = (id)=> {
    Konsole.log("Ich würde",Ich würde);
    const { list } = dieser.Zustand
    const newList = Liste.Filter(Artikel => Artikel.ID !=ID)
    let checkAll = neueListe.Länge und neueListe.jedes(Element => Element.geprüft)
    this.setState(() => ({Liste: neueListe,allesprüfen}),()=>{
      dies.doneLength()
    })
  }
  // Bearbeiten editHandler = (items)=>{
    dies.setState({
      Artikel: Artikel
    })
  }
  // Update update = (Inhalt)=>{
    const { Liste, Element } = dieser.Zustand
    let obj = Objekt.assign(item,{content})
    const neueListe = Liste.map(v => {
      wenn(v.id === obj.id) {
        v = {...obj}
      }
      zurückgeben v
    })
    dies.setState({
      Liste: neueListe,
      Artikel: obj
    })
  }
  // Abgeschlossen doneLenth=()=> {
    const { list } = dieser.Zustand
    const newList = Liste.Filter(Element => Element.geprüft)
    let selectLength = neueListe.Länge
    setzeTimeout(()=>{
      dies.setState({
        Länge auswählen
      })
    })
  }
  // Komponente einbindenDidMount() {
    this.unSubscribe = $bus.addListener("getFlag",(flag)=>{
      dies.setState({flag})
    })
    this.unSubscribe1 = $bus.addListener("sendValue",(obj)=>{
     this.addHandler(obj)
    })
    this.unSubscribe2 = $bus.addListener("Suchwert",(Wert)=>{
     this.searchHandler(Wert)
    })
    this.unSubscribe3 = $bus.addListener("getItem",(item)=>{
     this.editHandler(Element)
    })
    this.unSubscribe4 = $bus.addListener("update",(content)=>{
     dies.update(Inhalt)
    })
  }
  // Aushängen componentWillUnmount() {
    $bus.removeListener(dieses.abbestellen)
    $bus.removeListener(dieses.unSubscribe1)
    $bus.removeListener(dieses.unSubscribe2)
    $bus.removeListener(dieses.unSubscribe3)
    $bus.removeListener(dieses.unSubscribe4)
  }
  rendern() {
    let { flag, list, checkAll, selectLength } = dieser.Zustand
    zurückkehren (
      <div Klassenname='Container'>
        {/* Eingabefeld*/}
        <Eingabe></Eingabe>
        {/* Liste */}
        <Liste Liste={Liste} checkHandler={dieser.checkHandler} delHandler={dieser.delHandler}></Liste>
        {/* Statistik */}
        <Gesamt checkAllHandler={this.checkAllHandler.bind(this)} checkAll={checkAll} selectLength={selectLength}></Gesamt>
        {/* Popup-Fenster bearbeiten */}
        { Flagge ? <Maske ></Maske> : ''}
      </div>
    )
  }
}

importiere React, {Komponente} von 'react'
importiere { bus als $bus } von './bus'
exportiere Standardklasse Input erweitert Komponente {
  Konstruktor() {
    super()
    dieser.Zustand = {
      Wert:""
    }
  }
  changeHandler = (e)=>{
    dies.setState({
      Wert: e.Ziel.Wert
    })
    console.log("dieser.Zustands.Wert",dieser.Zustands.Wert);
  }
  // addHandler hinzufügen = ()=>{
    lass { Wert } = diesen.Zustand;
    lass obj = {
      ID: Date.now(),
      Inhalt: Wert,
      erledigt: falsch
    }
    wenn(Wert) {
      $bus.emit("Sendewert",obj)
    } anders {
      console.log("Bitte eingeben")
    }
  }
  // Suche searchHandler = ()=>{
    console.log("Suche");
    lass { Wert } = diesen.Zustand;
    if(!value) return console.log("Bitte eingeben");
    $bus.emit("Suchwert",Wert)
  }
  rendern() {
    let { value } = dieser.Zustand
    zurückkehren (
      <>
        <div Klassenname="Eingabe">
          <input type="text" value={value} placeholder='Bitte geben Sie Ihren Aufgabennamen ein und drücken Sie zur Bestätigung die Eingabetaste' onInput={this.changeHandler}/>
          <button className="btn btn-success" onClick={this.addHandler}>Hinzufügen</button>
          <button className="btn btn-primary" onClick={this.searchHandler}>Suchen</button>
        </div>
      </>
    )
  }
}

importiere React, {Komponente} von 'react'
Element aus „./Item“ importieren
Importiere PropTypes aus „Prop-Types“
exportiere Standardklasse Liste erweitert Komponente {
  statische Eigenschaftentypen = {
		Liste:PropTypes.array.isRequired,
	}
  rendern() {
    let { Liste, checkHandler, checkAllHandler, delHandler } = this.props;
    console.log("Liste",Liste);
    zurückkehren (
      <ul Klassenname="Aufgabenliste">
        {
          Liste.map(Element => (<Elementelement={Element} Schlüssel={Element.id} checkHandler={checkHandler} checkAllHandler={checkAllHandler} delHandler={delHandler}></Element>))
        }
      </ul>
    )
  }
}

importiere React, {Komponente} von 'react'
importiere { bus als $bus } von './bus'
exportiere Standardklasse Item erweitert Komponente {
  Konstruktor(Requisiten) {
    super(Requisiten)
    dieser.Zustand = {}
  }
  ÄnderungsHandler = (id)=>{
    let { checkHandler } = diese.props;
    Rückkehr (e)=>{
      checkHandler(id,e.ziel.geprüft)
    }
  }
  entferneHandler(){
    } = this.props;
    delHandler(Argumente[0])
  }
  editHadnler = (Artikel)=>{
    $bus.emit("getFlag",true)
    localStorage.setItem("obj",JSON.stringify(item))
    $bus.emit("getItem",Artikel)
  }
  rendern() {
    } = diese.Eigenschaften;
    zurückkehren (
      <li Klassenname="Aufgabenelement">
        <input type="checkbox" aktiviert={item.checked} beiÄnderung={this.changeHandler(item.id)}/>
        <div Klassenname="Inhalt">
          {item.content}
        </div>
        <button className={`btn btn-success ${!item.checked ? "d-none" : "d-block"}`} onClick={()=> this.editHadnler(item)}>Bearbeiten</button>
        <button className={`btn btn-danger ${!item.checked ? "d-none" : "d-block"}`} onClick={this.removeHandler.bind(this,item.id)}>Löschen</button>
      </li>
    )
  }
}

importiere React, {Komponente} von 'react'
exportiere Standardklasse Total erweitert Komponente {
  Konstruktor() {
    super()
    dies.changeAllHandler = dies.changeAllHandler.bind(dies)
  }
  changeAllHandler(e) {
    let { checkAllHandler } = diese.props
    checkAllHandler(e.target.geprüft)
  }
  rendern() {
    let { checkAll,selectLength } = diese.props;
    zurückkehren (
      <div Klassenname="Aufgabe erledigt">
        <input type="checkbox" onChange={this.changeAllHandler} aktiviert={checkAll}/>
        <p>Abgeschlossen<span className="single-number">{selectLength}</span> Alle<span className="all-number">4</span></p>
      </div>
    )
  }
}

importiere React, {Komponente} von 'react'
importiere { bus als $bus } von './bus'
exportiere Standardklassenmaske erweitert Komponente {
  Konstruktor() {
    super()
    dieser.Zustand = {
      Wert: ''
    }
  }
  closeMask = ()=>{ // Popup-Fenster schließen$bus.emit("getFlag",false)
  }
  updateHandler = ()=>{
    $bus.emit("getFlag",false)
    $bus.emit("aktualisieren",dieser.Zustand.Wert)
  }
  beiÄnderung = (e) => {
    dies.setState({
      Wert: e.Ziel.Wert
    })
  }
  componentDidMount() {
    let obj = JSON.parse(localStorage.getItem("obj"))
    dies.setState({
      Wert: obj.content
    })
  }
  rendern() {
    let { value } = dieser.Zustand
    zurückkehren (
      <div>
        <div Klassenname="mm-Maske" >
        <div Klassenname="mm-modal">
          <div Klassenname="mm-Titel">
            <span className="mm-edit">Bearbeiten</span>
            <span className="mm-close" onClick={this.closeMask}>x</span>
          </div>
          <div Klassenname="mm-Inhalt">
            <input type="text" value={value} placeholder="Aufgabenname" onInput={this.onChange}/>
          </div>
          <div Klassenname="mm-box-btn">
            <div className="mm-update" onClick={this.updateHandler}>Aktualisieren</div>
            <div className="mm-cancel" onClick={this.closeMask}>Abbrechen</div>
          </div>
        </div>
      </div>
      </div>
    )
  }
}

 yarn add -D Ereignisse
importiere { EventEmitter } von 'Ereignisse'
export const bus = new EventEmitter() // Businstanz exportieren

* {
  Rand: 0;
  Polsterung: 0;
}
Eingabe,Schaltfläche {
  Gliederung: keine;
  Rand: 0;
}
ul>li {
  Listenstil: keiner;
}
.container {
  Breite: 400px;
  Höhe: 500px;
  Rand: 10px automatisch automatisch;
  Polsterung: 20px;
  Box-Größe: Rahmenbox;
  Farbe: #3333;
  Rand: 1px durchgezogen;
  Überlauf: versteckt;
}
.Eingabe {
  Breite: 100 %;
  Höhe: 30px;
  Anzeige: Flex;
}
Eingabe {
  Breite: 100 %;
  Höhe: 100%;
  Rand: 1px durchgezogen #e1e1e1;
  Box-Größe: Rahmenbox;
  Rahmenradius: 4px;
  Polsterung: 0 10px;
}
Eingabe::Platzhalter {
  Farbe: #e1e1e1;
}
Eingabe:Fokus {
  Rand: 1px durchgezogen #0096e6;
}
.Aufgabenliste {
  Breite: 100 %;
  Anzeige: Flex;
  Flex-Flow: Spaltenumbruch;
  Rand oben: 10px;
}
.Aufgabenliste li {
  Anzeige: Flex;
  Höhe: 40px;
  Inhalt ausrichten: zentriert;
  Elemente ausrichten: zentrieren;
  Polsterung: 0 10px;
  Hintergrundfarbe: #eef0f4;
  Rand unten: 10px;
  Überlauf: versteckt;
  Textüberlauf: Auslassungspunkte;
  Leerzeichen: Nowrap;
}
.task-list li Eingabe[Typ^="Kontrollkästchen"] {
  Breite: 15px;
  Höhe: 15px;
  Rand: 1px durchgezogen #e1e1e1;
  Cursor: Zeiger;
  Flex-Schrumpfen: 0;
}
.Aufgabenliste li .Inhalt {
  biegen: 1;
  Rand links: 10px;
}
.btn {
  Flex-Schrumpfen: 0;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Höhe: 30px;
  Inhalt ausrichten: zentriert;
  Polsterung: 5px 10px;
  Textausrichtung: zentriert;
  Cursor: Zeiger;
  Rahmenradius: 4px;
  Farbe: #fff;
  Buchstabenabstand: 2px;
  Rand: 0,5px;
  Box-Größe: Rahmenbox;
  Schriftgröße: 16px;
}
.btn-Erfolg {
  Hintergrundfarbe: #0f0;
}
.btn-Gefahr {
  Hintergrundfarbe: #f00;
}
.btn-primary {
  Hintergrundfarbe: #0096e6;
}
.Aufgabe erledigt {
  Breite: 100 %;
  Höhe: 40px;
  Zeilenhöhe: 40px;
  Anzeige: Flex;
  Elemente ausrichten: zentrieren;
  Hintergrundfarbe: #eef0f4;
  Polsterung links: 10px;
  Box-Größe: Rahmenbox;
  Rand oben: 30px;
}
.task-done Eingabe {
  Breite: 15px;
  Höhe: 15px;
  Rand: 1px durchgezogen #e1e1e1;
  Cursor: Zeiger;
  Flex-Schrumpfen: 0;
  Rand rechts: 10px;
}
.einzelne-Zahl {
  Farbe: #333;
  Rand links: 5px;
}
.alle-Nummer {
  Farbe: rot;
  Rand links: 5px;
}
.mm-Maske{
  Position: fest;
  oben: 0;
  links: 0;
  rechts:0;
  unten: 0;
  Hintergrund: rgba (0,0,0,0,5);
}
.mm-modal{
  Breite: 350px;
  Position: absolut;
  oben: 50 %;
  links: 50 %;
  transformieren: übersetzen(-50 %, -50 %);
  z-Index: 1000;
  Hintergrund:#ffffff;
  Rahmenradius: 4px;
  Farbe: #333333;
}
.mm-Titel {
  Höhe: 50px;
  Zeilenhöhe: 50px;
  Anzeige: Flex;
  Inhalt ausrichten: Abstand dazwischen;
  Rahmen unten: 1px durchgezogen #e1e1e1;
  Boxgröße: Rahmenbox;
  Schriftgröße: 20px;
}
.mm-bearbeiten{
  Texteinzug: 20px;
}
.mm-schließen{
  Rand rechts: 20px;
  Schriftfamilie: Consals;
  Cursor:Zeiger;
}
.mm-Inhalt{
  Polsterung: 0 20px;
  Rand unten: 20px;
}
.mm-Inhaltseingabe{
  Breite: 100 %;
  Höhe: 30px;
  Zeilenhöhe: 30px;
  Texteinzug: 20px;
  Rahmenradius: 4px;
  Rand oben: 20px;
  Rand: 1px durchgezogen #666;
  Boxgröße: Rahmenbox;
}
.mm-content input:hover{
  Rand: 1px durchgezogen #0096e6;
}
.mm-Inhaltseingabe: letztes Kind {
  Texteinzug: 5px;
}
.mm-box-btn{
  Anzeige: Flex;
}
.mm-update,.mm-cancel{
  Breite: 80px;
  Höhe: 30px;
  Zeilenhöhe: 30px;
  Textausrichtung: zentriert;
  Cursor:Zeiger;
  Hintergrund: #0096e6;
  Farbe: #ffffff;
  Benutzerauswahl: keine;
  Rahmenradius: 4px;
  Rand: 0 20px 50px;
}
.mm-update{
  Rand rechts: 10px;
}
.d-keine {
  Anzeige: keine;
}
.d-block {
  Anzeige: Block;
}