检查数组中是否存在项，并从该数组中删除该特定项

Check if an item exist in array and remove that particular item from that array

本文关键字：数组 删除 是否 存在 检查      更新时间：2023-09-26

我有一个组件来显示标签列表，用户可以选择要跟随的标签。因此，当用户单击标记时，我希望将其存储在标记SelectedList中，并添加一个新的类名selected_tag。但是，如果标记已存在于标记SelectedList中，请从标签SelectedList中删除该标记，并删除类名selected_tag。

我很困惑如何检查标签对象是否存在于tagSelectedList中，并从列表中删除该特定的标签项。我该怎么做？我们将非常感谢您的帮助和指导。非常感谢。

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>
        );
    }
}

您可以通过以下方式检查标签列表是否包含项目：

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

或

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

您可以通过以下方式删除类：

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

您可以通过删除项目

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

既然您正在使用React，为什么不创建一个自动添加/删除类的表达式呢。

将变量添加到状态并基于值切换类。

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>
        );
    }
}
相关文章：