React表单 - 输入模式验证当我使用OnClick()单击“提交”按钮时丢失

Question

我的表单验证是在我的输入字段中定义的。它们是"必需的"，并且具有"模式"。当我单击提交按钮时，它正确地告诉我是否有任何字段无效。但是，我需要我的按钮才能实际做某事。因此，当我添加一个onClick = {this.somefunction}时，突然我所有的表单验证都完全丢失了，无论如何它都会提交我的请求。我该如何解决？

  saveTicket=(event)=>{
event.preventDefault();
this.setState({submit:1})

}

          <form>
        <input required className="form-control" id="name" placeholder="Event Name" defaultValue={this.state.name} onChange={this.updateName}/>
        <input required className="form-control" id="date" pattern="d{4}-d{2}-d{2}" defaultValue={this.state.date} onChange={this.updateDate} placeholder="Date (YYYY-MM-DD)"/>
        <input required className="form-control" id="seat" defaultValue={this.state.seat} onChange={this.updateSeat} placeholder="Seat"/>
        <br/><label>Price in TikTik Coins</label><input type="number" min="1" pattern="d+" defaultValue={this.state.pprice} className="form-control" id="seat" onChange={this.updatePPrice} placeholder="Sale Price"/>
        <label>Max Resale Price in TikTik Coins</label>
        <input required className="form-control" id="pprice" type="number" min="1" pattern="d+" defaultValue={this.state.sprice} onChange={this.updateSprice} placeholder="Max Resale Price"/>
        <i>This ticket can never be sold above the Max Resale Price.</i>
        <button className="btn btn-lg btn-primary btn-block" onClick={this.saveTicket}>Create Ticket</button>
      </form>

Answer 1

尝试将saveTicket函数分配给表单上的onSubmit事件，而不是将其直接分配给按钮，因此它不会覆盖您使用的HTML5属性所需的提交事件（pattern，required）：

<form onSubmit={this.saveTicket}>
  <input required ... etc />
  <input required ... etc />
  <button className="btn btn-lg btn-primary btn-block">Create Ticket</button>
<form>