@bobrui4anin

Как удалить отфильтрованный элемента массива?

Уважаемые друзья, недавно начал разбираться с React'om. И делая очередной мини таск, столкнулся с такой проблемой. Вот исходник:
var debtorsArr = {items: ['Волков А.В. - Фленов "Р.А.Б."','Фисюк А.Г. - Лилиан "Я читаю Ваши мысли"','Малинов В.И. - Писарев "Экономика"','Павловский Е.А. - Ширшнев "Эта интересная история"']};

        class MainVue extends React.Component {
            constructor(props) {
                super(props);
                this.state = {items: this.props.arr.items, value: '', clear: ''};
            }
            deleteItem(index) {
                this.props.arr.items.splice(index, 1);
                this.setState({items: this.props.arr.items});
            }
            addItem() {
                this.props.arr.items.push(this.state.value);
                this.setState({items: this.props.arr.items, value: this.state.clear});
            }
            handleChange(event) {
                this.setState({value: event.target.value});
            }
            findItems(event) {
                // console.log('this.props.arr.items', this.props.arr.items);
                var filterList = this.props.arr.items.filter((item) => {
                // console.log('status', item.toLowerCase().search(event.target.value.toLowerCase()) !== -1);
                return item.toLowerCase().search(event.target.value.toLowerCase()) !== -1;
                });
                // console.log('items', filterList);
                this.setState({items: filterList});
            }
            render() {
                var showItems = this.state.items.map((item, index) => {
                    return <li key={index}>{item} <button onClick={this.deleteItem.bind(this, index)}>Удалить</button></li>
                });
                return <div>
                    <div>
                        <input value={this.state.value} onChange={this.handleChange.bind(this)} placeholder="Add debtor..."/>
                        <button onClick={this.addItem.bind(this)}>Добавить</button>
                    </div>
                    <div>
                        <input onChange={this.findItems.bind(this)} placeholder="Search debtor..."/>
                    </div>
                    <ul>
                        {showItems}
                    </ul>
                </div>
            }
        }

        ReactDOM.render(
            <MainVue arr={debtorsArr}/>,
            document.getElementById('app')
        );

1-ый инпут для добавления элемента в массив, 2-ой инпут для фильтрации. Когда мы начинаем работать с отфильтрованным элементом - он представляет из себя li>...button>удалить, собственно в чем вся загвоздка - по нажатию на кнопку "удалить" удаляется 0 элемент массива, но не отфильтрованный, подскажите, где я что то упустил. Буду рад любому ответу !!!
  • Вопрос задан
  • 161 просмотр
Решения вопроса 1
0xD34F
@0xD34F
Косяк в том, что передаёте в deleteItem индекс элемента отфильтрованного массива, а удаляете из исходного. Можно удалять не по индексу, а по значению, например.

В метод deleteItem передаёте item вместо index:

onClick={() => this.deleteItem(item)}

Сам deleteItem будет выглядеть как-то так:

deleteItem(item) {
  this.props.arr.items.splice(this.props.arr.items.indexOf(item), 1);
  this.setState({items: this.props.arr.items});
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы