Как встроить дополнительные плагины jQuery в Механика

Вы можете прослушать onBlur событие. Это происходит, когда пользователь покидает поле ввода. Итак, добавьте onBlur прослушиватель событий в поле ввода.

Например: для homePrice

<input
      type="text"
      id="input3-group1"
      className={styles.formControl}
      name="homePrice"
      // assign value as this.state.homePrice
      value={this.state.homePrice}
      // Add onBlur and use handleValidation event handler
      onBlur={this.handleValidation}
      onChange={this.handleStateChange}
      placeholder="Amount of home's selling price"
  />

// for testing add this line just below the input field 
// it will display form error              
{ this.state.formError && <span>{this.state.formError} </span> }

Теперь добавьте метод handleValidation в свой компонент

handleValidation = (e) => {
         let { value } = e.target
         // check if value is empty or not       
         if (value.trim().length === 0) {
            this.setState({formError: 'Input field is required'}) 
            return
         // check if value is number or not
         } else if (isNaN(Number(value))) {
            this.setState({formError: 'Input field value must be a number'}) 
            return
        } else {
            this.setState({ formError: ''})
        }
    } 

ОБНОВЛЕНИЕ

handleCostChange = (e) => {
        // for testing only not needed
        let { value } = e.target; 
        // Checking whether "e.target.value" on button is empty or not
        console.log('some',value,'text') // some text
        console.log(value.trim().length === 0)  // true

        const {
            homePrice,
            downPaymentAmt,
            termOfLoan,
            annualInterestRate,
        } = this.state;

        // updates
        if (homePrice.trim().length === 0) {
            this.setState({formError: 'Input Fields are required'}) 
            return
        } else if (isNaN(Number(homePrice))) {
            this.setState({formError: 'Input Fields must be number'}) 
            return
        }

        const principal = homePrice - downPaymentAmt;
        const lengthOfLoan = 12 * termOfLoan;
        const percentageRate = annualInterestRate / 1200;
        // Formula M = P[i(1+i)^n]/[(1+i)^n -1]
        const cost =
            (principal * percentageRate) /
            (1 - Math.pow(1 + percentageRate, lengthOfLoan * -1)).toString();
        this.setState({
            cost: cost.toFixed(2),
            // update
            formError: ''
        });
    };

А также измените

this.state = {homePrice: 0}

на

this.state = {homePrice: ''}

Это необходимо, потому что я использовал метод trim(), который является строковым методом. Поэтому, когда вы отправляете, не касаясь поля ввода, вы получите ошибку.