Question

在尝试构建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;

Answer 1

您可以使用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"
    }

}

react-bootstrap验证状态

1 个答案: