Überprüfen Sie, ob ein Element im Array vorhanden ist, und entfernen Sie dieses bestimmte Element aus diesem Array.

Question

Ich habe eine Komponente, um die Liste der Tags anzuzeigen, und der Benutzer kann Tags auswählen, um ihnen zu folgen. Wenn der Benutzer also auf ein Tag klickt, möchte ich es unter tagsSelectedList speichern und einen neuen Klassennamen hinzufügen selected_tag ​​. Wenn das Tag jedoch bereits in tagsSelectedList vorhanden ist, entfernen Sie das Tag aus tagsSelectedList und entfernen Sie auch den Klassennamen selected_tag ​​.

Ich bin verwirrt, wie zu prüfen, ob das Tag-Objekt innerhalb tagSelectedList vorhanden ist und entfernen Sie dieses bestimmte Tag-Element aus der Liste. Wie mache ich das? Ihre Hilfe und Anleitung wird sehr geschätzt. Vielen Dank.

component.js:

let tags = [ 
    {id: "1", tagName: "Arts"}, 
    ... 
    ... 
    {id: "59", tagName: "Writing"} 
]; 
var tagsSelectedList = []; 

export default class SignUpSubscribeTags extends React.Component { 
    constructor(props){ 
     super(props); 
    } 
    selectTag = (e) => { 

     // if the tag is not present in the tagsSelectedList then add the tag in the tagsSelectedList also add the tag_selected class name 
     var isTagPresent = tagsSelectedList.filter(function(item) { 
      return item.id === e.target.dataset.pk 
     }); 

     if(isTagPresent) { 
      console.log(e.target.dataset.pk, 'present in tagsSelectedList'); 
     } 
     else { 
      console.log(e.target.dataset.pk, 'not present in tagsSelectedList'); 
     } 

     // if the tag is present in tagsSelectedList then remove the tag object from the tagsSelectedList also remove the tag_selected class name 

    } 

    render() { 
     let tagList = tags.map((Tag) => { 
      return (
       <li id={Tag.tagName} class="tag" data-pk={ Tag.id } key={Tag.id} onClick={this.selectTag}>{Tag.tagName}</li> 
      ); 
     }); 

     return(
      <div id="signup-process-wrapper-addTags"> 

       <div id="add_tags"> 
        <ul id="tag_list"> 
         {tagList} 
        </ul> 
       </div> 
      </div> 
     ); 
    } 
} 

Answer 1

Sie überprüfen können, ob taglist Artikel enthält von:

e.target.className.replace("tag_selected", ""); 

:

if (e.target.className.indexOf("tag_selected") > -1) {} 

oder

var isTagPresent = tagsSelectedList.filter(function(item) { 
     return item.id === e.target.key 
    }); 
    if(isTagPresent.length) {} 

Sie Klasse entfernen

Sie können Artikel entfernen, indem

tagsSelectedList = tagsSelectedList.filter(function(item) { 
     return item.id !== e.target.key 
    }) 

Answer 2

Da Sie reagieren verwenden, warum nicht einen Ausdruck erstellen, die Klasse wird automatisch hinzufügen/entfernen.

Fügen Sie eine Variable zum Status hinzu und basierend auf der Wert-Umschaltklasse.

export default class SignUpSubscribeTags extends React.Component { 
    constructor(props){ 
     super(props); 
     this.state = { 
      isSelected: false 
     } 
    } 

    selectTag = (e) => { 
     this.setState({ 
     isSelected: !this.state.isSelected 
     }) 
    } 

    render() { 
     let tagList = tags.map((Tag) => { 
      return (
       <li 
        id={Tag.tagName} 
        class="tag" 
        className={this.state.isSelected? ' tag_selected ' : null} 
        key={Tag.id} 
        onClick={this.selectTag}> 
        {Tag.tagName} 
       </li> 
      ); 
     }); 

     return(
      <div id="signup-process-wrapper-addTags"> 
       <div id="add_tags"> 
        <ul id="tag_list"> 
         {tagList} 
        </ul> 

       </div> 
      </div> 
     ); 
    } 
}