Reactjs 在React with Add按钮中添加输入

我试图创建一组可以复制或删除的输入

我发现并使用了以下组合： 这是因为上面的代码不处理删除：

我可能不需要指向特定的输入，因为在我的界面中，您应该始终只添加一个新的输入，如果之前的输入已填充，我将稍后设置条件，因此只删除最后一个。因此，我可以用一个简单的计数器来解决所有这些问题，尽管对于不同的输入类型，我需要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>
        );
    }
}

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

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

正如您所看到的，我目前正在函数中声明输入，或者至少在我看来，我是。。。这不是const inputList=this.state.inputList；做我认为这是我应该在“国际海事组织计数”旁边宣布的问题，但我试图做到这一点：

const inputList=this.state.inputList

常量属性类型={ inputList:React.PropTypes.inputList， };

已导致应用程序根本未加载：无法读取未定义的属性“状态”

不仅如此，而且对我来说，这看起来不像是干净的重构代码，因为我已经做了两次，请记住，我将不得不更多地复制这段代码，因为添加和删除函数和按钮都必须存在于三到四种不同的输入类型中

更新：将删除按钮部分移至另一个问题：

传入的密钥应是唯一的。列表中不应该有两个具有相同键值的项

在您的例子中，当您执行两次后续的递增和递减操作时，最终得到的是相同的计数值。这意味着对不同的标签重复相同的键

记录计数以检查其是否唯一。密钥0在数组中使用了两次，这就是错误的含义

传入的密钥应该是唯一的。列表中不应该有两个具有相同键值的项

在您的例子中，当您执行两次后续的递增和递减操作时，最终得到的是相同的计数值。这意味着对不同的标签重复相同的键

---

记录计数以检查其是否唯一。密钥0在数组中使用了两次，这就是错误的含义

删除常量计数并在状态中初始化计数变量

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} />),
        });
    }

---

删除常量count并在状态中初始化count变量

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} />),
        });
    }

---

在初始状态下添加计数

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

然后删除此行const count=0

因为你用计数作为你的钥匙 将此项也更改为

---

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

在初始状态下添加计数

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

然后删除此行const count=0

因为你用计数作为你的钥匙 将此项也更改为

---

---

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

在初始状态下添加计数。this.state={inputList:[]，计数：0}；删除常量计数=0；line@abdul初始状态是I4m应该添加的默认函数吗？我在自己的代码中没有看到它。您正在将组件的初始状态设置在这一行的下方，即构造函数中的superprops。只需像这样将计数0添加到其中即可。state={inputList:[]，计数0}@abdul正常，但常数计数为0；删除我得到未捕获的引用错误：计数未定义我认为您得到的是您在更改中使用的b/c，这也是为了在初始状态下添加计数。this.state={inputList:[]，计数：0}；删除常量计数=0；line@abdul初始状态是I4m应该添加的默认函数吗？我在自己的代码中没有看到它。您正在将组件的初始状态设置在这一行的下方，即构造函数中的superprops。只需像这样将计数0添加到其中即可。state={inputList:[]，计数0}@abdul正常，但常数计数为0；删除我得到未捕获的引用错误：计数未定义我认为您得到的是您在将此更改为ok时使用的b/c。但是我怎么能不给这个键0，不管它是什么。我觉得我没有做任何事情来实现这一点？计数应为this.state.count+1。。。。0+1=1等等……在输入标记中根本不使用计数。初始化另一个变量，并在递增和递减的情况下继续递增。谢谢，但我不能将输入列表：输入列表，在某些情况下，我必须在一些描述中告诉输入列表+1，不是吗？那是什么样子的？我真的是react的初学者。如果你真的需要计数，那就用它作为另一个参数。所以你的标签看起来像是谢谢！阿卜杜勒提出了一些类似的建议，结果奏效了：好的。但是我怎么能不给这个键0，不管它是什么。我觉得我没有做任何事情来实现这一点？计数应为this.state.count+1。。。。0+1=1，依此类推……你不觉得吗

---

---

输入标记中的所有se计数。初始化另一个变量，并在递增和递减的情况下继续递增。谢谢，但我不能将输入列表：输入列表，在某些情况下，我必须在一些描述中告诉输入列表+1，不是吗？那是什么样子的？我真的是react的初学者。如果你真的需要计数，那就用它作为另一个参数。所以你的标签看起来像是谢谢！abdul提出了类似的建议，但效果很好：我没有看到任何按钮调用减量方法。添加这个`添加输入{this.state.inputList}`谢谢！你能解释一下，如果有4张不同的卡，重构后的版本会是什么样子吗？我已经添加了按钮，但它没有触发。为什么要添加第二个{this.state.inputList}ohh这是错误的，如果你有按钮，它应该按预期工作。理想情况下，你可以有一个不同的列表，并为每种输入类型计数。每个输入类型都有一个不同的handlerincrement和Decreation，用于增加相应的输入类型计数。我看不到任何调用decrement方法的按钮。添加这个`添加输入{this.state.inputList}`谢谢！你能解释一下，如果有4张不同的卡，重构后的版本会是什么样子吗？我已经添加了按钮，但它没有触发。为什么要添加第二个{this.state.inputList}ohh这是错误的，如果你有按钮，它应该按预期工作。理想情况下，你可以有一个不同的列表，并为每种输入类型计数。另外，每个输入类型都有不同的handler递增和递减，递增相应的输入类型计数。递减方法不适用于我。我得到：warning.js:36警告：FlattChildren…：遇到两个具有相同密钥的子项，0:$0。子密钥必须是唯一的；当两个孩子共享一个键时，只使用第一个孩子，删除按钮使输入列表变大1，然后停止执行任何操作。递减法对我不起作用。我得到：warning.js:36警告：FlattChildren…：遇到两个具有相同密钥的子项，0:$0。子密钥必须是唯一的；当两个孩子共享一个键时，只使用第一个孩子，删除按钮使输入列表变大1，然后停止执行任何操作。