ReactJS todo list app remove函数

这是一个非常简单的todo list应用程序,这是我的实践代码,正如你所看到的,我们有一个list组件来显示项目;当用户通过submit函数输入新数据时,将添加新项目。

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

这个my 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;

my 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;