react-bootstrap驗證狀態

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"
    }

}