Question

我正在尝试为我的不同类别的东西找到一个正常工作的删除按钮，但我的删除按钮只是添加就像我的添加按钮。

我认为在使用“concat”时会有所期待，但我不知道我应该怎么做。

我在这里添加了帮助：Add Inputs in React with add button

但是如何删除最后一个元素（可能是因为用户未事先填写过它）？

/* ************************************* */
/* ********       IMPORTS       ******** */
/* ************************************* */
import React, { Component } from 'react';
import { Card, CardBlock, Button, InputGroup, Input } from 'reactstrap';
import ProviderInfos from '../ProviderInfos/ProviderInfos';

/* ************************************* */
/* ********      VARIABLES      ******** */
/* ************************************* */

/* ************************************* */
/* ********      COMPONENT      ******** */
/* ************************************* */
export default class SearchExtendedComponent extends Component {

    constructor(props) {
        super(props);
        this.state = { inputCurry: [],
            inputWurst: [],
            inputSausage: [],
            inputPretzel: [],
            Curry: 1,
            Wurst: 1,
            Sausage: 1,
            Pretzel: 1 };
        this.incrementCurry = this.incrementCurry.bind(this);
        this.decrementCurry = this.decrementCurry.bind(this);
        this.incrementWurst = this.incrementWurst.bind(this);
        this.decrementWurst = this.decrementWurst.bind(this);
        this.incrementSausage = this.incrementSausage.bind(this);
        this.decrementSausage = this.decrementSausage.bind(this);
        this.incrementPretzel = this.incrementPretzel.bind(this);
        this.decrementPretzel = this.decrementPretzel.bind(this);
    }

    componentDidMount() {
        this.incrementCurry();
        this.incrementWurst();
        this.incrementSausage();
        this.incrementPretzel();
    }

    incrementCurry() {
        const inputCurry = this.state.inputCurry;
        this.setState({
            Curry: this.state.Curry + 1,
            inputCurry: inputCurry.concat(<InputGroup>
                <Input placeholder="Curry" key={this.state.Curry} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementCurry() {
        const inputCurry = this.state.inputCurry;
        this.setState({
            Curry: this.state.Curry - 1,
            inputCurry: inputCurry.concat(<InputGroup>
                <Input placeholder="Curry" key={this.state.Curry} /><ProviderInfos /></InputGroup>),
        });
    }

    incrementWurst() {
        const inputWurst = this.state.inputWurst;
        this.setState({
            Wurst: this.state.Wurst + 1,
            inputWurst: inputWurst.concat(<InputGroup>
                <Input placeholder="Wurst" key={this.state.Wurst} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementWurst() {
        const inputWurst = this.state.inputWurst;
        this.setState({
            Wurst: this.state.Wurst - 1,
            inputWurst: inputWurst.concat(<InputGroup>
                <Input placeholder="Wurst" key={this.state.Wurst} /><ProviderInfos /></InputGroup>),
        });
    }

    incrementSausage() {
        const inputSausage = this.state.inputSausage;
        this.setState({
            Sausage: this.state.Sausage + 1,
            inputSausage: inputSausage.concat(<InputGroup>
                <Input placeholder="Sausage" key={this.state.Sausage} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementSausage() {
        const inputSausage = this.state.inputSausage;
        this.setState({
            Sausage: this.state.Sausage - 1,
            inputSausage: inputSausage.concat(<InputGroup>
                <Input placeholder="Sausage" key={this.state.Sausage} /><ProviderInfos /></InputGroup>),
        });
    }

    incrementPretzel() {
        const inputPretzel = this.state.inputPretzel;
        this.setState({
            Pretzel: this.state.Pretzel + 1,
            inputPretzel: inputPretzel.concat(<InputGroup>
                <Input placeholder="Pretzel" key={this.state.Pretzel} /><ProviderInfos /></InputGroup>),
        });
    }

    decrementPretzel() {
        const inputPretzel = this.state.inputPretzel;
        this.setState({
            inputPretzel: inputPretzel.deleteElement(this.state.Pretzel),
            Pretzel: this.state.Pretzel - 1,
        });
    }

    render() {
        return (
            <Card>
                <CardBlock className="main-table">
                    <fieldset>
                        <legend>Currys</legend>
                        {this.state.inputCurry}
                        <button onClick={this.incrementCurry}>Ajouter un Curry</button>
                        <button onClick={this.decrementCurry}>Enlever un Curry</button>
                    </fieldset>
                    <fieldset>
                        <legend>Wursts</legend>
                        {this.state.inputWurst}
                        <button onClick={this.incrementWurst}>Ajouter un Wurst</button>
                        <button onClick={this.decrementWurst}>Enlever un Wurst</button>
                    </fieldset>
                    <fieldset>
                        <legend>MasterSausages</legend>
                        {this.state.inputSausage}
                        <button onClick={this.incrementSausage}>Ajouter un Sausage</button>
                        <button onClick={this.decrementSausage}>Enlever un Sausage</button>
                    </fieldset>
                    <fieldset>
                        <legend>Pretzels</legend>
                        {this.state.inputPretzel}
                        <button onClick={this.incrementPretzel}>Ajouter un Pretzel</button>
                        <button onClick={this.decrementPretzel}>Enlever un Pretzel</button>
                    </fieldset>
                    <Button color="secondary">Options</Button>{' '}
                    <Button id="btn">Exécuter</Button>
                </CardBlock>
            </Card>
        );
    }
}

正如你所看到的，我在第四个元素（椒盐卷饼）上尝试了一些新东西，但是“deleteElement”不是这个对象类型的可接受函数，我得到了：

Uncaught TypeError: inputMultiProvider.deleteElement is not a function

在控制台中。

Answer 1

问题在于密钥

整个班级需要自上而下重新工作才能发挥作用。

首先：UUID是唯一可以到达此处的方式，或者您将松开密钥/密钥在条目之间将是相同的。

首先将https://www.npmjs.com/package/uuid添加到您的项目中

你出于某种原因需要添加一个导入，没有人知道正确的语法，所以这里它可能对很多人有用：

import UUID from 'node-uuid';

然后你的增量应该是这样的：

incrementPretzel() {
    const uuid = require('uuid/v1');
    uuid();
    const inputPretzel = this.state.inputPretzel;
    this.setState({
        Cube: uuid,
        inputPretzel: inputPretzel.concat(<InputGroup>
            <Input placeholder="Pretzel" key={uuid} /><ProviderInfos /></InputGroup>),
    });
}

你的减量如下：

decrementPretzel() {
    this.setState({
        inputPretzel: this.state.inputPretzel.splice(this.state.inputPretzel, this.state.inputPretzel.length - 1),
    });
}

但这并没有解决以下问题：

不干净的代码
未重构的代码
html in setState

警告。

React：使用按钮添加/删除组件：删除不起作用

1 个答案: