javascript - React.js Bootstrap 添加或删除输入字段

Question

我正在使用 React.js 和 react-bootstrap 构建网络应用程序。我有一个表单页面，用户可以在其中输入他们正在经历的疾病的症状。我希望用户能够输入文本，还可以选择删除之前输入的文本。

这是一个用 Javascript 完成的例子: http://bootsnipp.com/snippets/featured/dynamic-form-fields-add-amp-remove-bs3

我想拥有与上面链接相同的功能，但使用的是 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>

当 this.addSymptomField() 被调用时，我想在页面中添加一个 Input 字段，而当 this.removeSymptomField() 被调用，我想从页面中删除现有的 Input 字段。

非常感谢!

Answer 1

您可以保留当前输入列表的状态，并在调用 addSymptomField 和 removeSymptomField 时修改它

在你的组件构造函数中

this.state = { inputs: [] }

渲染中

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

您的 renderInputs 方法可能如下所示

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

然后在调用 addSymptomField 和 removeSymptomField 方法时简单地向列表添加或从列表中删除输入