ReactJS待辦事項列表應用刪除功能

Question

這是一個非常簡單的待辦事項列表應用程序，這是我的實踐代碼，如您所見，我們有一個List組件來顯示項目；當用戶通過Submit功能輸入新數據時，將添加新項目。

這次我試圖在單擊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>
};
// ...