如何清除'React boostrap-validation'表格？

Question

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

<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>

表单如下所示：

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>
)

表单上的

submitLineItem() 将由 summary 和 cost 输入定义的订单项添加到 this.state，这会导致使用该新订单项重新呈现出现在 line-items 面板中。

这一切都按我想要的方式工作，除了表单输入字段（"summary" 和 "cost"）在我按下按钮时没有被清除。这意味着在输入第一行后，这些输入始终包含新创建的订单项行的 "duplicate"。

如何清除这些表单字段（作为 submitLineItem() 的一部分或其他方式）？

<Form> 和 <ValidatedInput> 来自 react-bootstrap-validation.

Answer 1

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

<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>

例如：

   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>
      )
     }
   })

如果您希望重置最初保存数据的表单的状态，您可以在创建处理程序中轻松完成。如果可能的话，您可能希望将它分配给一个按钮或被点击的东西。我相信你也可以听 return keyUp。

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

进入一个组件，给它默认的道具或初始状态，然后当你创建一个新的时，它将是 empty/cleared?

如何清除'React boostrap-validation'表格？

How to clear a 'React boostrap-validation' form?

forms

reactjs

react-bootstrap