反应：使用按钮添加/删除组件：删除不工作

Question

我试图让我的不同类别的东西工作删除按钮，但我的删除按钮只添加就像我的添加按钮。

我认为这是预计使用“concat”时，但我不知道我应该如何做到这一点。

我得到的帮助将在这里：Add Inputs in React with add button

但是我怎么删除最后一个元素（也许cheking该用户还没有在事先填写的话）？

/* ************************************* */ 
/* ********  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中的setState

• 不洁代码被警告。