Question

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

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

我希望与上面的链接具有相同的功能，但使用React。这是我到目前为止的部分代码，但我不确定继续的最佳方式。

react-bootstrap

调用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()字段页面。

非常感谢你！

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方法时，只需在列表中添加或删除输入

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

1 个答案: