ReactJS 待办事项列表应用删除功能

Question

这是一个非常简单的待办事项列表应用程序，这是我的练习代码，您可以看到我们有一个列表组件来显示项目；当用户通过提交功能输入新数据时，将添加新项目。

这次我试图在点击 li 中的 span 时删除项目，我认为我做错了。

我们如何将该事件附加到列表中？

这是我的 App.js：

import React, {Component} from 'react';
import './App.css';
import List from "./components/List"

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            term: '',
            items: [],
            remove: function () {
            }
        }
    }

    onChange = (e) => {
        this.setState({term: e.target.value})
    };

    onSubmit = (e) => {
        e.preventDefault();
        this.setState({
            items: [...this.state.items, this.state.term]
        })
    };

    removeItem = (item)=>{
        this.setState({
            items: this.state.items.splice(this.state.items.indexOf(item),1)
        })

    };
    render() {
        return (
            <div className="App">
                <form className="App" onSubmit={this.onSubmit}>
                    <input value={this.state.term}  onChange={this.onChange}/>
                    <button>submit</button>
                </form>
            <List items={this.state.items}  />
            </div>
        );
    }
}

export default App;

我的 List.js 组件：

import React from "react"
import App from "../App";

const listyle = {
    color: 'red'
};

const red = {
    backgroundColor : 'red'
};

const List = (props) => {
    var val = props.items.map(function (data, index) {
        return <li style={listyle} key={index}>{data}<span style={red} onClick={props.remove(data)}>X</span></li>
    });
    return <ul>{val}</ul>
};

export default List;

Answer 1

您必须将removeItem 函数传递给List 组件，并将函数传递给项目onCLick。

App.js

<List items={this.state.items} onRemove={this.removeItem} />

List.js

// ...
const List = (props) => {

    var val = props.items.map(function (data, index) {
        return <li style={listyle} key={index}>{data}<span style={red} onClick={() => props.onRemove(data)}>X</span></li>
    });

    return <ul>{val}</ul>
};
// ...