Question

我试图制作一组可以复制或删除的输入。

我发现并使用了以下组合： https://jsfiddle.net/69z2wepo/36745/ 这个（因为上面的代码不处理删除）： https://codepen.io/lichin-lin/pen/MKMezg

我可能不需要指向一个特定的输入，因为在我的界面中你应该总是只添加一个新的，如果前一个填充（我以后设置条件），因此只删除最后一个。所以我可以用一个简单的计数器来解决所有这些问题（尽管我需要3-4个计数器来处理不同的输入类型）。

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

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

const count = 0;

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

    constructor(props) {
        super(props);
        this.state = { inputList: [] };
        this.incrementCount = this.incrementCount.bind(this);
        this.decrementCount = this.decrementCount.bind(this);
    }

    incrementCount() {
      const inputList = this.state.inputList;
        this.setState({
            count: this.state.count + 1,
            inputList: inputList.concat(<Input key={count} />),
        });
    }
    decrementCount() {
      const inputList = this.state.inputList;
        this.setState({
            count: this.state.count - 1,
            inputList: inputList.concat(<Input key={count} />),
        });
    }
    render() {
        return (
            <Card>
                <CardBlock className="main-table">
                    <InputGroup>
                        <Input placeholder="Type1" />
                        <ProviderInfos />
                    </InputGroup>
                    {/* THE IDEA IS TO HAVE AN ADD AND REMOVE BUTTON FOR EACH TYPE */}
                    <InputGroup className="add-more">
                        <button onClick={this.incrementCount}>Add input</button>
                        {this.state.inputList}
                    </InputGroup>
                    <InputGroup>
                        <Input placeholder="Type2" />
                        <ProviderInfos />
                    </InputGroup>
                    <InputGroup>
                        <Input placeholder="Type3" />
                        <ProviderInfos />
                    </InputGroup>
                    <Button color="secondary">Options</Button>{' '}
                    <Button id="btn">Exécuter</Button>
                </CardBlock>
            </Card>
        );
    }
}

我在控制台中收到错误：

Warning: flattenChildren(...): Encountered two children with the same key, `1:$0`. Child keys must be unique; when two children share a key, only the first child will be used.

这似乎适合发生的事情：

之后只添加第一个新输入＆＃34; add＆＃34;按钮停止工作。

正如你所看到的那样，我目前正在宣布功能中的输入（或者至少在我看来，就像我一样......这不是const inputList = this.state.inputList;所做的吗？）我认为＆＃ 39;我应该在＃34; count＆＃34;旁边宣布它的问题。 IMO，但我尝试这样做：

const inputList = this.state.inputList;

const propTypes = { inputList: React.PropTypes.inputList, };

导致应用程序根本没有加载：＆＃34;无法读取属性＆＃39;状态＆＃39;未定义＆＃34;。

不仅如此，但这对我来说似乎不是一个干净的重构代码，因为我已经做了两次并且记住我将不得不重复这个代码，因为两者都是添加和删除功能（和按钮）必须在那里有三到四种不同的输入类型。

更新：将删除按钮部分移至另一个问题：React : Add / Remove components with buttons : Remove not working

Answer 1

key中传递的<Input key={count} />应该是唯一的。您不应该在列表中有两个具有相同key值的项目。

在您的情况下，当您进行2次后续递增和递减时，您最终会得到相同的计数值。这意味着对于不同的key代码

重复相同的<Input/>

console.log计数检查它是否唯一。键0在数组中使用两次，这就是错误的含义。

Answer 2

删除const计数并初始化状态中的计数变量。

constructor(props) {
        super(props);
        this.state = { inputList: [], count: 0 };
        this.incrementCount = this.incrementCount.bind(this);
        this.decrementCount = this.decrementCount.bind(this);
    }

然后在输入元素中使用this.state.count作为键：

incrementCount() {
      const inputList = this.state.inputList;
        this.setState({
            count: this.state.count + 1,
            inputList: inputList.concat(<Input key={this.state.count} />),
        });
    }
    decrementCount() {
      const inputList = this.state.inputList;
        this.setState({
            count: this.state.count - 1,
            inputList: inputList.concat(<Input key={this.state.count} />),
        });
    }

Answer 3

在初始状态下添加计数。

this.state = { inputList: [] , count :0};

然后删除此行const count = 0;

因为您使用计数作为关键将此更改为。

<Input key={this.state.count} />

我为另一个问题做了jssfiddle，这个概念很相似，所以它可能会有所帮助。

使用添加按钮

3 个答案: