Reagieren: Wie arbeite ich mit der Datenbank?

Question

Ich studiere react.js.

Wie Klasse 'Verwendung' zu dem Element, wo der Klick auftritt, korrekt hinzufügen? Von anderen Elementen muss es entfernt werden.

Wie man den Index loswird, aber in der Lage sein, die Gegenstände zu behandeln und zu entsorgen?

var DB = [ 

    { 
     name: 'Имя 1', url: 'http://localhost:1', use: true 
    }, 
    { 
     name: 'Имя 2', url: 'http://localhost:2', use: false 
    }, 
    { 
     name: 'Имя 3', url: 'http://localhost:3', use: false 
    } 
]; 

class SideBarEl extends React.Component { 
    hoverLi(t){ 
     if(t.target.id !== ''){ 
      for (var i = 0; i < DB.length; i++){ 
       if(t.target.id == i){ 
        DB[i].use = true; 
       } else { 
        DB[i].use = false; 
       } 
      } 
     } 
    } 
    render(){ 
     var newsTemplate = DB.map(function(item, index) { 
      return (
       <li key={ index } id={ index } onClick={ this.hoverLi.bind(this)} className={ item.use ? 'use' : '' }> 
        { item.name } 
        <span> 
         { item.url } 
        </span> 
       </li> 
      ) 
     }, this); 
     return(
      <ul>{newsTemplate}</ul> 
     ) 
    } 
} 

Answer 1

1 Set this.state

Sie state Reagieren Sie verwenden müssen, um solche Dinge und rerender wenn Aktion tritt zu behandeln. Wenn Sie nur eine Variable verwenden, weiß React nicht, wann etwas neu gerendert werden soll.

this.state = { 
    links: [ 
    { 
     name: "Имя 1", 
     url: "http://localhost:1", 
     use: true 
    }, 
    { 
     name: "Имя 2", 
     url: "http://localhost:2", 
     use: false 
    }, 
    { 
     name: "Имя 3", 
     url: "http://localhost:3", 
     use: false 
    } 
    ] 
}; 

mehr über Zustand Lesen Sie auf https://facebook.github.io/react/docs/state-and-lifecycle.html

2 Update Zustand von onClick

handleClick(item) { 
    this.setState(prevState => ({ 
    links: prevState.links.map(link => { 
     link.use = link === item; 
     return link; 
    }) 
    })); 
} 

render() { 
    // rest of code... 
    <li 
    key={item.url} 
    id={index} 
    onClick={() => this.handleClick(item)} 
    className={item.use ? "use" : ""} 
    > 
    // rest of code... 
} 

Für nur 3 Links verwenden, es ist okay so nicht optimierten Code zu haben. Wenn Sie dies für eine große Sammlung von Links (Hunderte oder Tausende von Links) anwenden möchten, wird es ein bisschen mehr Arbeit erfordern, aber wahrscheinlich ist es außerhalb der von Ihnen gestellten Frage.

3 Demo

https://codesandbox.io/s/mQoomVOmA

Wenn Sie auf einen Link klicken, wird es rot und Rest schwarz sein wird, weil ich dieses kleine CSS .use { color: red; } hinzugefügt

Viel Spaß und glücklich Codierung.