Javascript React.js引导添加或删除输入字段

我正在使用

React.js

和

React bootstrap

构建一个web应用程序。我有一个表单页面，用户可以在其中输入他们正在经历的疾病的症状。我希望用户能够键入文本，还可以选择删除以前键入的文本

下面是一个用Javascript实现的示例：

我想拥有与上面链接相同的功能，但使用React。这是我到目前为止为本节编写的代码，但我不确定继续的最佳方式

var closeButton = <Button onClick={this.removeSymptomField()}>Close</Button>;

<Input type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>

<Button onClick={this.addSymptomField()}>Click to add a new symptom.</Button>

var closeButton=关闭；
单击以添加新症状。

调用

this.addSymptomField（）

时，我想向页面添加一个

Input

字段，调用

this.removeSymptomField（）

时，我想从页面中删除现有的

Input

字段

---

非常感谢你

在调用

addSymptomField

和

removeSymptomField

在组件构造函数中

this.state = { inputs: [] }

渲染中

<div className="inputs">
   {this.renderInputs()}
</div>

{this.renderInputs（）}

您的renderInputs方法可以如下所示

renderInputs() {
   return this.state.inputs.map((input, index) => <Input key={index} type="text" buttonAfter={closeButton} placeholder="Type a symptom here."/>)
}

renderInputs（）{
返回此.state.inputs.map（（输入，索引）=>）
}

---

然后，在调用

addSymptomField

和

removeSymptomField

方法时，只需在列表中添加或删除输入即可，这非常好而且非常轻量级，非常感谢！我知道添加按钮的功能是什么样子的。但是如果这是我的add字段函数，remove函数会是什么样子：appendInput（）{var newInput=

input-${this.state.inputs.length}

；this.setState（{inputs:this.state.inputs.concat（[newInput]）；}