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
和Wursts

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

在我放入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>
    );
  }
}

FoodType组件

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清除了绑定。

删除删除特定的收集项目

1 个答案: