Question

我有一个组件来显示标签列表，用户可以选择标签来跟随它们。因此，当用户点击代码时，我希望将其存储在 tagsSelectedList 中，并添加新的类名 selected_tag 。但是，如果该标记已存在于 tagsSelectedList 中，请从 tagsSelectedList 中删除该标记，并删除类名 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>
        );
    }
}

Answer 1

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

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

Answer 2

由于您使用的是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>
        );
    }
}

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

2 个答案: