How to attach this code to a React js class?

Question

JavaScript

Hello, please tell me how to fasten the validation js code so that it works
, here is the link to bootstrap bootstrap-4.ru/docs/4.2.1/components/forms/#validation

// ВОТ ЭТОТ КОД НИЖЕ НУЖНО ВСТАВИТЬ В REACT

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

This is a React class

class SignUp extends Component {

apiClient = new ApiClient();

  constructor(props) {
    super(props);
     this.state = {
            name: '',
            email: '',
            phone: '',
            photo: '',
            selectedId: -1,
            positions: [],
            mask: '999999999',
            errors:  {
            	errorName: '',
            	errorEmail: ''
            }
            
        }
        this.getListPositions();

    handleName = (e) => {
        this.setState({
            name: e.target.value
        });
    };

    handleEmail = (e) => {
        this.setState({
            email: e.target.value
        });
    };

    handlePhone = (e) => {
        this.setState({
            phone: e.target.value.replace(/[{()}]/g, '').replace(/\s/g, '')
        });
    };

    handleChange = (e) => {
    		
        this.setState({ 
        	selectedId: e.target.value });
    };

}

_isNameValid=(name)=> {
  let errorName = '';
  if(name === '') {
    errorName = 'Поле не может быть пустым';
    this.setState({errorName});
    return false
  }
  if(name.length < 2) {
    errorName = 'Длинна должна быть не меньше 3х символов';
    this.setState({errorName})
    return false
  }
  this.setState({errorName})
  return true
}

_isEmailValid=(email)=> {
  let errorEmail = '';
  if(email === '') {
    errorEmail = 'Поле не может быть пустым';
    this.setState({errorEmail})
    return false
  }
  this.setState({errorEmail})
  return true
}

isFormValid =()=>{
    return this._isNameValid(this.state.name) && this._isEmailValid(this.state.email)
  }	


postHandler = (e) => {
  e.preventDefault();
  if(this.isFormValid()) {
  console.log("form")
  }	
  }

  render() {
    return (
    <section id="sign-up" className="sign-up">
      <div className="container">
        <div className="row justify-content-center">
        <div className="col-md-8">
        <HeadlineH2 title="Lorem ipsum"/>
      </div>
           </div>
        
         	<form action="" 
         	className="form needs-validation" 
         	onSubmit={this.handleSubmit} noValidate>
          <div className="row justify-content-center">
            <div className="col-xl-4 col-lg-4 col-md-4 col-sm-12">
              <div className="form-block">

                <input type="text" 
                id="validationCustom01"
                className="form-control"
                onChange={this.handleName}
                value={this.state.name} 
                errors={this.state.errorName}
                placeholder="Your name"/>

                <span className="form__desc">Name</span>
                {this.state.errorName}
              </div>
              
            </div>
            <div className="col-xl-4 col-lg-4 col-md-4 col-sm-12">
              <div className="form-block">
              <input type="email" 
               id="exampleInputEmail1" aria-describedby="emailHelp"
              className="form-control"
              value={this.state.email}
              placeholder="Your email" 
              onChange={this.handleEmail}
              errors={this.state.errorEmail}
              required/>
              <span className="form__desc">Email</span>
              {this.state.errorEmail}
            </div>
            </div>
            <div className="col-xl-4 col-lg-4 col-md-4 col-sm-12">
              <div className="form-block">

         		<InputMask mask="[phone]" 
           		placeholder="+380 (__) ___ __ __"
              maskChar={'_'} 
              value={this.state.phone} 
              id="phone"
              className="form-control"
              name="phone" 
              onChange={this.handlePhone}
              beforeMaskedValueChange={this.beforeMaskedValueChange}
            />
         <span className="form__desc">Phone</span>
       </div>
            </div>
          </div>
          <div className="row">
            <div className="col-xl-6 col-lg-6 col-md-6 col-sm-12 ">
              <div className="form-block">
                <select 
                  id={this.state.selectedId}
                  value={this.state.selectedId}
                  onChange={this.handleChange} 
                  className="form-control form__select"
                >
                <option disabled value='-1'> Choose a position </option>
                  {this.state.positions.map((item)=>{
                    return (<option value={item.id} key={item.name}> 
                                                    {item.name}</option>)
                  })}
                </select>
              </div>
            </div>
            <div className="col-xl-6 col-lg-6 col-md-6 col-sm-12">
              <div className="form-block">
              <fieldset>
                <input type="file" 
                id="file" 
                className="form__input form__input--file"
                value={this.state.photo}
                onChange={this.checkSize}
                required/>
                <label className="input__label" htmlFor="file">Upload</label>
                <label className=" input__label--file" htmlFor="file">
                  <span className="icon-upload"></span>
                </label>
                {this.state.photo === '' ? <span id="file-name" 
                                                       className="file__name">Upload your photo</span> :
              <span id="file-name" className="file__name"> 
                                                 {this.state.photo.replace(/\\/g, '/').split('/').pop()}</span>}
                {/*<span id="file-name" className="file__name">Upload your photo</span>*/}
  						</fieldset>
      </div>
  						
              </div>
          </div>
      
          <div className="row justify-content-center">
      			<button type="submit" onClick={this.postHandler} className="btn btn-gray">Sign Up</button>
    		</div>
      </form>

      </div>
    </section>
    );
  }
}

export default SignUp;

Answer 1

You don’t have to do this if you want to use bootstrap - use react bootstrap and its validation, otherwise some kind of mess is obtained