Извлечение элемента из таблицы - реакция

Question

Я пытаюсь создать приложение CRUD в реакции, и я столкнулся с несколькими проблемами. Как я могу удалить предмет со стола? Можно ли передать идентификатор компоненту Info в методе рендеринга? Как я могу позже связать его с элементом? Почему метод e.PreventDefault () вызывает ошибку при попытке удалить?

import React, { Component } from 'react';

const Info = ({ index, login, pass }) => (
    <>
        <thead>
            <tr>
                <th>ID</th>
                <th>LOGIN</th>
                <th>PASSWORD</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td key={index}>{index}{alert(index)}</td>
                <td>{login}</td>
                <td>{pass}</td>
            </tr>
        </tbody>
        <input type="submit" value='X' onClick={() => this.del(index)}></input>
    </>
);

class List extends Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            login: "",
            pass: "",
        };

        this.add = this.add.bind(this);
        this.show = this.show.bind(this);
        this.del = this.show.bind(this);
    }



    add(e) {
        e.preventDefault();
        this.setState({
            [e.target.name]: e.target.value,
        });
    }

    show(e) {
        e.preventDefault();

        if (!this.state.login.length || !this.state.pass.length) {
            return;
        }

        else {
            const newUser = {
                login: this.state.login,
                pass: this.state.pass,
            };

            this.setState(state => ({
                data: state.data.concat(newUser),
            }))
        }
    }

    del(index) {

        const tab = this.state.data.filter((temp) => temp.index !== index);
        this.setState(({
            data: tab
        }));

    }
    render() {



        return (
            <div>
                <form onSubmit={this.show}>
                    <label>Login</label><br></br><input type='text' name='login' onChange={e => this.add(e)}></input><br></br>
                    <label>Password</label><br></br><input type='text' name='pass' onChange={e => this.add(e)}></input><br></br>
                    <input type="submit" value="Add"></input>
                </form>
                <table>

                    {this.state.data.map((val, index) => (
                        <>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>LOGIN</th>
                                    <th>PASSWORD</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td key={index}>{index}</td>
                                    <td>{val.login}</td>
                                    <td>{val.pass}</td>
                                </tr>
                            </tbody>
                            <input type="submit" value='X' onClick={() => this.del(index)}></input>
                        </>
                    ))}
                </table>
            </div>
        )
    }
}


export default List;

Answer 1

В вашем коде есть небольшие исправления.

1. this.del = this.show.bind(this); должно быть this.del = this.del.bind(this);

2. Вы пытаетесь удалить элемент из данных состояния с использованием индекса (this.state.data.filter((temp) => temp.index !== index);), но элемент внутри данных не имеет свойства индекса.

В этом случае вы можете использовать splice для удаления элемент из данных.

class List extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: [],
            login: "",
            pass: "",
        };

        this.add = this.add.bind(this);
        this.show = this.show.bind(this);
        this.del = this.del.bind(this);
    }



    add(e) {
        e.preventDefault();
        this.setState({
            [e.target.name]: e.target.value,
        });
    }

    show(e) {
        e.preventDefault();

        if (!this.state.login.length || !this.state.pass.length) {
            return;
        }

        else {
            const newUser = {
                login: this.state.login,
                pass: this.state.pass,
            };

            this.setState(state => ({
                data: state.data.concat(newUser),
            }))
        }
    }

    del(index) {
let {data}=this.state
        data.splice(index, 1);
        this.setState(({
            data
        }));

    }
    render() {



        return (
            <div>
                <form onSubmit={this.show}>
                    <label>Login</label><br></br><input type='text' name='login' onChange={e => this.add(e)}></input><br></br>
                    <label>Password</label><br></br><input type='text' name='pass' onChange={e => this.add(e)}></input><br></br>
                    <input type="submit" value="Add"></input>
                </form>
                <table>

                    {this.state.data.map((val, index) => (
                        <React.Fragment>
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>LOGIN</th>
                                    <th>PASSWORD</th>

                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td key={index}>{index}</td>
                                    <td>{val.login}</td>
                                    <td>{val.pass}</td>
                                </tr>
                            </tbody>
                            <input type="submit" value='X' onClick={() => this.del(index)}></input>
                        </React.Fragment>
                    ))}
                </table>
            </div>
        )
    }
}

ReactDOM.render(<List />, document.querySelector("#app"))

Вот демоверсия jsFiddle

Надеюсь, это поможет:)