Forms 如何清除'；React boostrap验证'；形式？

我在一个页面上有一个表单，表单提交按钮将行添加到页面中-在页面本身最终关闭之前，可以重复执行此操作

<div className="panel-body line-items">
     {/* A line-item row for each existing line item.  These update if they are typed in... */}
     {this.state.lineItems.map( (li, index) =>
         <LineItem key={index} item={li} } />
     )}
     {/* And a line-item form where we can add another one...*/}
     <CreateLineItemForm onSubmit={this.submitLineItem.bind(this)}/>
 </div>

{/*每个现有行项目的行项目行。如果在…*/}中键入，这些行项目将更新
{this.state.lineItems.map（（li，index）=>
)}
{/*和一个行项目表单，我们可以在其中添加另一个…*/}

表单如下所示：

const CreateLineItemForm = ({onSubmit}) => (
    <Form onValidSubmit={onSubmit} className="panel form-horizontal">
        <div className="line-item line-item-input-row">
           <ValidatedInput type="text" name="summary"/>
           $<ValidatedInput type="number" name="cost"/>
           <Button type="submit" id="createLineItem" className="btn">
              <i className="fa fa-plus-square fa-lg"/></Button>
        </div>
    </Form>
)

const CreateLineItemForm=（{onSubmit}）=>(
$
)

表单上的

submitLineItem（）

将由

摘要

和

成本

输入定义的行项目添加到

此.state

，这将导致重新渲染，新行项目出现在

行项目

面板中

这一切都按照我想要的方式工作，只是当我按下按钮时，表单输入字段（“摘要”和“成本”）没有被清除。这意味着在输入第一行后，这些输入始终包含新创建的行项目行的“副本”

如何清除这些表单字段（作为

submitLineItem（）

的一部分或其他方式）

---

和

来自

react引导验证

如果您发现自己一遍又一遍地重复一组代码，那么这通常是组件的一个很好的候选者。为什么不打破呢

<div key={index}>
    <Input type="text" name={"lineItem"+index} value={li.summary} onChange={this.onLineItemDescriptionChange.bind(this, index)}/>
   $<Input type="number" step="0.01" wrapperClassName="line-item-cost" name={"lineItemCost"+index} value={li.cost}
onChange={this.onLineItemValueChange.bind(this, index)}/>
</div>

---

在一个组件中，为它提供默认道具或初始状态，然后当您创建一个新的道具时，它将为空/清除？

有趣的想法，我将尝试。但实际上是底部的ValidatedInput没有清除，而且我不清楚它们是在新渲染上重新创建的？哦，我想我明白了。如果您只是将这些用作将要传递到上半部分的新实例的数据的临时容器，那么只需在最后重置状态。我会更新我已经对你的答案投了赞成票，谢谢你的帮助，并且投票结束了这个问题，因为它不够清楚。当我找到清理代码并使其更清晰的方法时，我会再次询问。当然。另一个可能的方向：您可能会从父组件传入一个

addNewItem

函数，给它一些状态值，然后在子组件中调用它。这会让事情干涸，而且通常是一个很好的方向来决定这个问题是否应该结束，所以我只是澄清了它（也许）。问题是，

CreateLineItemForm

中的

ValidatedInput

在提交该表单时未被清除，我无法找到一种方法来“获取它们”以清除它们。在简历聊天中经过一些讨论后，没有足够的共识认为这个问题不清楚，因此我编辑而不是关闭并重新提问。

   React.createClass({
     getInitialState() {
       return {
        someState: true
       }
     }
     render() {
      return (
        <div key={index}>
         <Input type="text" name={"lineItem"+index} value={li.summary} onChange={this.onLineItemDescriptionChange.bind(this, index)}/>
         $<Input type="number" step="0.01" wrapperClassName="line-item-cost" name={"lineItemCost"+index} value={li.cost}
        onChange={this.onLineItemValueChange.bind(this, index)}/>
        </div>
      )
     }
   })

function handleCreateNewLineItem(e) {
  e.preventDefault() // if using a form element
  // update your state
  this.setState({
     li.cost: 0,
     li.summary: ''
  })
}