Удалить элемент без использования индекса React

Question

Я хочу удалить элемент, который щелкнул правой кнопкой мыши. Я использую onContextMenu и event.preventDefault, чтобы не показывать контекстное меню. Однако я не знаю, как удалить элемент без индекса. Требование этого - не использовать индекс для удаления. Класс приложения:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activities: activities,
            filteredActivities: activities,
            isShow: false,
        };
        this.handleSearchChange = this.handleSearchChange.bind(this);
        this.handleClickChange = this.handleClickChange.bind(this);
        this.addItem = this.addItem.bind(this);
        this.deleteItem = this.deleteItem.bind(this);
    }

    deleteItem(item) {
        item.preventDefault();
        const activities = this.state.activities.slice();
        var response = confirm("Sure delete?");
        if (response == true) {
            // how to delete please?
            this.setState({
                activities: activities
            });
        }
    }

    render() {
        const filteredActivities = this.props.filteredActivities;
        const isShow = this.state.isShow;
        return(
            <div className="notificationsFrame">
                <div className="panel">
                    <Header name={this.props.name} onClickSearch={this.handleClickChange} onClickAdd={this.addItem} />
                    { isShow ? <SearchBar inputChanged={this.handleSearchChange} /> : null }
                    <Content activities={this.state.filteredActivities} onRightClick={this.deleteItem}/>
                </div>
            </div>
        );
    }
}

Структура данных:

const activities = [
    {img_url: "assets/dog.jpg", time: "A hour ago", content: "Have lunch.", comment_count: "2" },
    {img_url: "assets/dog.jpg", time: "5 hour ago", content: "Have breakfast.", comment_count: "0" },
    {img_url: "assets/dog.jpg", time: "6 hour ago", content: "Get up.", comment_count: "1" }
];

Содержание класса:

class Content extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="line"></div>
                {this.props.activities.map(activity =>
                    <ActivityItem img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count} onContextMenu={this.props.onRightClick}/>
                )}  

            </div>
        );
    }
}

Показываемый предмет класса:

class ActivityItem extends React.Component{
    render() {
        return (
            <div className="item" {...this.props}>
                <div className="avatar">
                    <img src={this.props.img_url} />
                </div>

                <span className="time">
                    {this.props.time}
                </span>
                <p>
                    {this.props.content}
                </p>
                <div className="commentCount">
                    {this.props.comment_count}
                </div>
            </div>
        );
    }
}

Answer 1

Вы можете сделать это так

deleteItem = (item) => {
    const activities = this.state.activities.slice(item, 1);
    var response = confirm("Sure delete?");
    if (response == true) {
        // how to delete please?
        this.setState({
            activities: activities
        });
    }
}

Содержание класса:

class Content extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="line"></div>
                {this.props.activities.map(activity =>
                    <ActivityItem img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count}
                        onContextMenu={() => this.props.onRightClick(activity)} />
                )}

            </div>
        );
    }
}

Answer 2

deleteItem нужно много изменить. const activities = this.state.activities.slice(); неверно и нужно изменить. Мне также нужно найти предметный указатель. Тогда я просто склеиваю предмет.

deleteItem = item => {
        event.preventDefault();
        let activities = this.state.activities;
        var response = confirm("Sure delete?");
        if (response == true) {
            for(var i = 0; i < activities.length; i++){
                if(activities[i] == item){
                    activities.splice(i,1);
                };
            };
            this.setState({
                activities: activities
            });
        };
    }

Содержание класса:

class Content extends React.Component {
    render() {
        return (
            <div className="content">
                <div className="line"></div>
                {this.props.activities.map(activity =>
                    <ActivityItem img_url={activity.img_url} time={activity.time}
                        content={activity.content} comment_count={activity.comment_count}
                        onContextMenu={() => this.props.onRightClick(activity)} />
                )}

            </div>
        );
    }
}

Answer 3

Вы можете отфильтровать массив activities.

 deleteItem(item) {
            item.preventDefault();
            const activities = this.state.activities;
            var response = confirm("Sure delete?");
            if (response == true) {


           activities.filter((i) => {
           if (i === item) {
           items.splice(items.indexOf(i), 1);
          }
             });


                this.setState({
                    activities: activities
                });
            }
        }