Проверка входных данных в калькуляторе - React

Question

Проверка входных данных в калькуляторе - React

Сохраните вызовы, которые вы делаете в массиве, затем вызовите xhr.abort () для каждого из них.

HUGE CAVEAT: вы можете прервать запрос, но это только клиентская сторона. Серверная сторона все еще может обрабатывать запрос. Если вы используете что-то вроде PHP или ASP с данными сеанса, данные сеанса блокируются до завершения ajax. Итак, чтобы позволить пользователю продолжить просмотр веб-сайта, вы должны вызвать session_write_close (). Это сохраняет сеанс и разблокирует его, чтобы продолжить работу других страниц, ожидающих продолжения. Без этого несколько страниц могут ожидать блокировки для удаления.

1

javascript reactjs

задан Max T 16 January 2019 в 16:04

1 ответ

Другие вопросы по тегам:

javascript reactjs

Похожие вопросы:

score 0 · Answer 1

Вы можете прослушать 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(), который является строковым методом. Поэтому, когда вы отправляете, не касаясь поля ввода, вы получите ошибку.