使用添加按钮在React中添加输入

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.

这似乎与发生的情况相符：

在“添加”按钮停止工作之后，仅添加第一个新输入。

如您所见，我当前正在声明函数中的输入（或者至少在我看来是……。那不是什么const inputList = this.state.inputList;？），我认为这就是我应该在“计数”旁边声明的问题“海事组织，但我试图做到：

const inputList = this.state.inputList;

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

导致应用程序根本无法加载：“无法读取未定义的属性’state’”。

不仅如此，但对我而言，这似乎不是干净的重构代码，因为我已经做了两次，请记住，由于添加和删除功能（和按钮）都将要重复此代码，因此必须有3到4种不同的输入类型。

Answer 1

在初始状态下添加计数。

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

然后删除这行 const count = 0;

由于您使用count作为密钥，因此也将其更改为。

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

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