下面是我正在呈现的表单的snapshopt,一切正常,但我无法使表单字段成为必需的。我通过反应组件呈现此表单。
代码: -
return <div className="panel alignment div-background" id="new-trade-form">
{this.props.store.newTradeRender}
<div className="panel panel-default">
<div className="panel-heading center-align" ><strong>New Trade</strong></div>
</div>
<div className="panel-body">
<fieldset>
<form name="myForm" id="newForm" ref="newForm" data-toggle="validator" >
Trade Date:
<div className='input-group date'>
<input type='date' className="form-control" id="date" required />
<span className="input-group-addon">
<span className="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div className="form-group">
Commodity:
<select className="form-control" id="commodity" ref="commodity" required>
<option disabled selected value=""> -- select a commodity -- </option>
{commodity}
</select>
</div>
Side:
<input type="radio" id="side" name="side" value="BUY" ref="side" />Buy
<input type="radio" id="side" name="side" value="SELL" ref="side" />Sell
<br />
<br />
<div className="form-group">
Counterparty:
<select className="form-control" id="counterparty" ref="counterparty" required>
<option disabled selected value=""> -- select a counter party -- </option>
{counterParty}
</select>
</div>
<br />
<div className="form-group">
Price($):<input id="price" name="price" type="number" step="any" className="form-control" ref="price" required />
</div>
<br />
<div className="form-group">
Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control" ref="qty" required />
</div>
<br />
<div className="form-group">
Location:
<select className="form-control" id="location" ref="location" required>
<option disabled selected value=""> -- select a location -- </option>
{location}
</select>
</div>
<br />
<button type='submit' className="btn btn-css btn-size" onClick={this.onSave} >SAVE</button>
</form>
</fieldset>
</div>
</div>
答案 0 :(得分:0)
尝试将处理程序从按钮移到onSubmit:
<form name="myForm" id="newForm" onSubmit={this.onSave} data-toggle="validator" >
<input type='date' className="form-control" id="date" required />
<button type='submit'>SAVE</button>
</form>
答案 1 :(得分:0)
删除onclick()并仅使用提交
答案 2 :(得分:0)
@Shivendra Gupta,我删除了表单标签并使用refs对象并在用户单击保存按钮时分配formRefs对象,将为formRefs对象运行循环,如果对象值为空,则可以显示特定字段是必需的。作为参考,我正在记录消息。希望有所帮助。
class Form extends Component {
constructor(props) {
super(props);
this.formRefs = {};
}
onSave = () => {
for(let key in this.formRefs) {
console.log(this.formRefs[key].value);
if(!this.formRefs[key].value) {
console.log(this.formRefs[key].getAttribute('id'), ' is required!');
}
}
}
onCancel = () => {
console.log('onCancel');
}
render() {
return (
<div className="panel alignment div-background" id="new-trade-form">
<div className="panel panel-default">
<div className="panel-heading" ><strong>Trade id: 0001 </strong></div>
</div>
<div className="panel-body">
<fieldset>
<div>
Trade Date:
<div className='input-group date'>
<input type='date' className="form-control" id="date" ref={(input) => {this.formRefs.date = input}} />
<span className="input-group-addon">
<span className="glyphicon glyphicon-calendar"></span>
</span>
</div>
<br />
<div className="form-group">
Commodity:
<select className="form-control" id="commodity" ref={(input) => {this.formRefs.commodity = input}}>
<option selected value=""> -- select a commodity -- </option>
</select>
</div>
Side:
<input type="radio" id="side" name="side" value="BUY" ref={(input) => {this.formRefs.side = input}} />Buy
<input type="radio" id="side" name="side" value="SELL" ref={(input) => {this.formRefs.side = input}} />Sell
<br />
<br />
<div className="form-group">
Counterparty:
<select className="form-control" id="counterparty" ref={(input) => {this.formRefs.counterparty = input}} >
<option disabled selected value=""> -- select a counter party -- </option>
</select>
</div>
<br />
<div className="form-group">
Price($):<input id="price" name="price" type="number" step="any" className="form-control"
ref={(input) => {this.formRefs.price = input}} />
</div>
<br />
<div className="form-group">
Quantity(MT):<input id="qty" name="qty" type="number" step="any" className="form-control"
ref={(input) => {this.formRefs.qty = input}} />
</div>
<br />
<div className="form-group">
Location:
<select className="form-control" id="location" ref={(input) => {this.formRefs.location = input}}>
<option disabled selected value="">-- select a location -- </option>
</select>
</div>
<br />
<button className="btn btn-css btn-size btn-spacing" onClick={this.onSave} >SAVE </button>
<button className="btn btn-css btn-size btn-spacing" onClick={this.onCancel} >CANCEL </button>
</div>
</fieldset>
</div>
</div>
)
}
}