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”）。这意味着在输入第一行之后，这些输入始终包含新创建的行项目行的“重复”。

如何清除这些表单字段（作为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: ''
  })
}

进入一个组件，给它默认的道具或初始状态，然后当你创建一个新的它时它将被清空/清除？

如何清除“React boostrap-validation”表单？

1 个答案: