Question

我第一次使用React做应用程序。尝试创建删除功能，允许用户单击任务并将其从阵列和UI中删除。

我按照其他教程尝试了几个不同的东西，但没有运气。（检查注释掉的部分）我在deleteItem函数中的console.log显示未定义，所以我知道它没有收到正确的数据。我迷失了为什么。

App.js：

import React, { Component } from 'react';
import { List } from './list';

export class Todo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            term: '',
            items: []
        };
        this.deleteItem = this.deleteItem.bind(this);
    }
    onChange = (e) => {
        this.setState({term: e.target.value});
    }
    onSubmit = (e) => {
        e.preventDefault()
        if (this.state.term === "") {
            alert("You must enter something!");

        } else {
            this.setState({
                term: '',
                items: [...this.state.items, this.state.term]
            })
        }
    }

    deleteItem(index){
        // var filteredItems = this.state.items.filter(function (item) {
        // return(item.index !== index);
        // });
        // console.log(filteredItems);
        // this.setState({
        // itmes: filteredItems
        // })

        this.setState({items: this.state.items.filter(function(item){
            console.log(item.index)
            return item !== item.index
        })})
        console.log(this.state.items)
        // if (item.index === index) {
        //     var indArr = this.state.items.indexOf(item.index);
        //     this.state.items.splice(indArr, 1);  
        // }

    }


    render() {
        return(
            <div>
                <h3>You currently have {this.state.items.length} things to do.</h3>
                <form className="Todo" onSubmit={this.onSubmit}>
                    <input placeholder="Enter task" value={this.state.term} onChange={this.onChange} />
                    <button>add</button>
                </form>
                <List items={this.state.items} delete={this.deleteItem}/>
            </div>
        )
    }
}

List.js

import React, { Component } from 'react';


export class List extends Component {   
    constructor(props) {
        super(props);
        this.delete = this.delete.bind(this);
    }
    delete(key) {
        this.props.delete(key);
    }
    render() {
        return(
            <ul>
                {
                    this.props.items.map((item, key) => <div class="listItems" 
                        onClick={(e) => this.delete(item.key)}
                        key={key}>{item}</div>)
                }
            </ul>
        )
    }
}

任何帮助都将深表感谢。

Answer 1

我发现您的代码存在一些问题。

TD：LR

// List.js
onClick={(e) => this.delete(item.key)
// instead => 
onClick={() => this.delete(item)

// App.js
return item !== item.index
// instead => 
return item !== index

这是我的代码链接，你可以看看： https://stackblitz.com/edit/react-n2uy9z

<强> 1。将错误的值传递给List.js中的this.delete

onClick={(e) => this.delete(item.key)

item.key是数组索引，您应该传递要删除的item。由于您使用e，因此不需要参数item。

<强> 2。过滤器回调函数不正确

this.setState({items: this.state.items.filter(function(item){
      console.log(item.index)
    return item!== item.index
})})

item.index未定义，因为item是数组中的值，它没有index属性。该值将被删除index，该值将传递给函数deleteItem，因此您应该使用return item !== index。

第3。无效的DOM属性class。

这是<div class="listItems"中的警告：＆＃39;警告：无效的DOM属性class。您的意思是className吗？＆＃39;。

因此请使用className代替class。

Answer 2

我相信您将删除功能绑定到错误的组件。尝试删除List.js类中的this.delete = this.delete.bind(this);并直接从onClick函数调用this.props.delete(key)

从状态数组中重新删除

2 个答案: