删除删除特定集合项目

Question

这里是我当前的代码：

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

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

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

    constructor(props) { 
     super(props); 
     this.state = { 
      inputPretzel: [], 
      inputCurry: [], 
      inputWurst: [] 
      }; 
     this.incrementPretzel = this.incrementPretzel.bind(this); 
     this.incrementCurry = this.incrementCurry.bind(this); 
     this.incrementWurst = this.incrementWurst.bind(this); 
     this.decrementPretzel = this.decrementPretzel.bind(this); 
     this.decrementCurry = this.decrementCurry.bind(this); 
     this.decrementWurst = this.decrementWurst.bind(this); 
    } 

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

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

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

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

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

    decrementCurry() { 
     this.setState({ 
      inputCurry: this.state.inputCurry.splice(this.state.inputCurry, this.state.inputCurry.length - 1), 
     }); 
    } 

    decrementWurst() { 
     this.setState({ 
      inputWurst: this.state.inputWurst.splice(this.state.inputWurst, this.state.inputWurst.length - 1), 
     }); 
    } 

    render() { 
     return (
      <Card> 
       <CardBlock className="main-table"> 
        <fieldset> 
         <legend>Pretzels</legend> 
         {this.state.inputPretzel} 
         <button onClick={this.incrementPretzel}>Add a Pretzel</button> 
         <button onClick={this.decrementPretzel}>Remove a Pretzel</button> 
        </fieldset> 
        <fieldset> 
         <legend>Curry</legend> 
         {this.state.inputCurry} 
         <button onClick={this.incrementCurry}>Add Curry</button> 
         <button onClick={this.decrementCurry}>Remove Curry</button> 
        </fieldset> 
        <fieldset> 
         <legend>Wurst</legend> 
         {this.state.inputPretzel} 
         <button onClick={this.incrementPretzel}>Add Wurst</button> 
         <button onClick={this.decrementPretzel}>Remove Wurst</button> 
        </fieldset> 
        <Button color="secondary">Options</Button>{' '} 
        <Button id="btn">Exécuter</Button> 
       </CardBlock> 
      </Card> 
     ); 
    } 
} 

正如你可以看到我有这些元素的三个不同的元素和集合：

• 脆饼
• Currys
• 和香肠

我可以添加它们并删除最后一个。但我想删除每一个。

在我放入setState并添加到每个集合的Html代码中，我想添加一个删除按钮或者在每行旁边都有一个删除按钮，这会删除正确的行。

Answer 1

更新

我增加了一些零部件跟踪输入状态和值添加到每个项目：

• pretzelValue
• curryValue
• wurstValue

这些是输入的值，然后传递给增量函数。同样删除了FoodType组件的输入，如果你想能够编辑它们，这有点棘手。

---

原始

您可以通过只使用集食品的对象数组清理了一下。然后使用另一个组件FoodType应该使它更清洁，并给good performance for onClick。每个物品都有它自己的uuid，因此您可以在.filter上将物品从状态中移除。 添加/删除的状态和功能可能更通用，但这是一个体面的开始。 事情是这样的：

const uuid = require('uuid/v1'); 

export default class PretzelStandComponent extends Component { 
    state = { 
    pretzels: [], 
    curries: [], 
    wursts: [], 
    pretzelValue: '', 
    curryValue: '', 
    wurstValue: '' 
    } 

    componentDidMount() { 
    } 

    incrementPretzel =() => { 
    this.setState({ 
     pretzels: this.state.pretzels.concat([{id: uuid(), value: this.state.pretzelValue}]), 
     pretzelValue: '' 
    }); 
    } 

    incrementCurry =() => { 
    this.setState({ 
     curries: this.state.curries.concat([{id: uuid(), value: this.state.curryValue}]), 
     curryValue: '' 
    }); 
    } 

    incrementWurst =() => { 
    this.setState({ 
     wursts: this.state.wursts.concat([{id: uuid(), value: this.state.wurstValue}]), 
     wurstValue: '' 
    }); 
    } 

    decrementPretzel = (id) => { 
    this.setState({ 
     pretzels: this.state.pretzels.filter((pretzel) => pretzel.id !== id) 
    }); 
    } 

    decrementCurry = (id) => { 
    this.setState({ 
     curries: this.state.curries.filter((curry) => curry.id !== id) 
    }); 
    } 

    decrementWurst = (id) => { 
    this.setState({ 
     wursts: this.state.wursts.filter((wurst) => wurst.id !== id) 
    }); 
    } 

    onPretzelChange = (event) => { 
    this.setState({ 
     pretzelValue: event.target.value 
    }); 
    } 

    onCurryChange = (event) => { 
    this.setState({ 
     curryValue: event.target.value 
    }); 
    } 

    onWurstChange = (event) => { 
    this.setState({ 
     wurstValue: event.target.value 
    }); 
    } 

    render() { 
    const {pretzels, curries, wursts} = this.state; 
    return (
     <Card> 
     <CardBlock className="main-table"> 
      <fieldset> 
       <legend>Pretzels</legend> 
       {pretzels.map((pretzel) => (
       <FoodType id={pretzel.id} placeholder="Pretzel" onRemove={this.decrementPretzel} value={pretzel.value} /> 
      ))} 
       <input onChange={this.onPretzelChange} value={this.state.pretzelValue} /> 
       <button onClick={this.incrementPretzel}>Add a Pretzel</button> 
      </fieldset> 
      <fieldset> 
       <legend>Curry</legend> 
       {curries.map((curry) => (
       <FoodType id={curry.id} placeholder="Curry" onRemove={this.decrementCurry} value={curry.value} /> 
      ))} 
       <input onChange={this.onCurryChange} value={this.state.curryValue} /> 
       <button onClick={this.incrementCurry}>Add Curry</button> 
      </fieldset> 
      <fieldset> 
       <legend>Wurst</legend> 
       {wursts.map((wurst) => (
       <FoodType id={wurst.id} placeholder="Wurst" onRemove={this.decrementWurst} value={wurst.value} /> 
      ))} 
       <input onChange={this.onWurstChange} value={this.state.wurstValue} /> 
       <button onClick={this.incrementWurst}>Add Wurst</button> 
      </fieldset> 
      <Button color="secondary">Options</Button>{' '} 
      <Button id="btn">Exécuter</Button> 
     </CardBlock> 
     </Card> 
    ); 
    } 
} 

食物类型组件

class FoodType extends Component { 
    onRemove =() => { 
    this.props.onRemove(this.props.id); 
    } 

    render() { 
    const {placeholder, id, value} = this.props; 
    return (
     <InputGroup> 
     <div key={id}>{value}</div> 
     <ProviderInfos /> 
     <button onClick={this.onRemove}>X</button> 
     </InputGroup> 
    ); 
    } 
} 

而且清理结合与property initializer syntax。