![](/img/trans.png)
[英]settimeout is not working because of React-bootstrap validation
[英]react-bootstrap validation state
在尝试构建Web应用程序时,我在实现具有多个表单控件的表单验证时面临困难。 我正在尝试创建一个onSave()方法,该方法将在按下保存按钮时被激活。 此方法将检查是否有任何字段,如果为空,则返回“错误”,然后变为红色;如果每个字段都已填充,则返回“成功”,然后变为绿色,然后继续进行下一步。
import React, { Component } from 'react';
import { Modal, Popover, Tooltip, Button , FormControl, FormGroup, ControlLabel } from 'react-bootstrap';
class Animal extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
herbivores: '',
omnivores: '',
};
}
herbiValidation() {
const length = this.state.item.length;
if (length==0) return null;
else if (length>0) return 'success';
}
omniValidation() {
const length1 = this.state.additionalInfo.length;
if (length1==0) return null;
else if (length1>0) return 'success';
}
onSave()
{
}
render() {
const popover = (
<Popover id="modal-popover" title="popover">
very popover. such engagement
</Popover>
);
const tooltip = <Tooltip id="modal-tooltip">wow.</Tooltip>;
return (
<div>
<Modal show={this.props.show} onHide={()=>this.props.handleClose()}>
<Modal.Header closeButton>
<Modal.Title>Types of animal</Modal.Title>
</Modal.Header>
<Modal.Body>
<form>
<FormGroup controlId='herbiName' validationState={this.herbiValidation()}>
<ControlLabel>herbi Name</ControlLabel>
<FormControl
type='text'
value={this.state.herbivores}
placeholder='Enter herbivores Name'
onChange={({ target }) => { this.setState({ herbivores: target.value }) }}
/>
<FormControl.Feedback />
</FormGroup>
<FormGroup controlId='omniName' validationState={this.omniValidation()}>
<ControlLabel>OmniName</ControlLabel>
<FormControl
type='text'
value={this.state.omnivores}
placeholder='Enter omnivores Name'
onChange={({ target }) => { this.setState({ omnivores: target.value }) }}
/>
<FormControl.Feedback />
</FormGroup>
<Button bsStyle='primary' className='save-button' onClick={() => this.props.submit(this.state)}>Save</Button>
</form>
</Modal.Body>
<Modal.Footer>
<Button onClick={()=>this.props.handleClose()}>Close</Button>
</Modal.Footer>
</Modal>
</div>
);
}
}
export default Animal;
您可以使用if操作来检查值是否存在
onSave(){
if(this.state.herbivores && this.state.omnivores){
//Do something if both values exists
return "Success"
}
else{
//Do something if both values do not exist
return "Error"
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.