Как сделать ошибку проверки React / Bootstrap 4 видимой? - PullRequest
Новая
       37

Как сделать ошибку проверки React / Bootstrap 4 видимой?

0 голосов
/ 28 марта 2020

Я использую React 16.13.0 и Bootstrap 4. У меня есть компонент React (src / components / Input.jsx), 

import React from 'react';
import {FormControl, FormLabel} from 'react-bootstrap';

const Input = (props) => {
    return (
  <div className="form-group">
      <FormLabel>{props.title}</FormLabel>
      <FormControl
            type={props.type}
            id={props.name}
            name={props.name}
            value={props.value}
            placeholder={props.placeholder}
            onChange={props.handleChange}
          />

      {props.errors && props.errors[props.name] && (
          <FormControl.Feedback>
                 {props.errors[props.name].map((error, index) => ( 
                     <div key={`field-error-${props.name}-${index}`} className="fieldError">{error}</div>
                 ))} 
          </FormControl.Feedback>
      )}
  </div>
    )
}

экспорт по умолчанию Input;

в котором я хотел бы отобразить сообщение об ошибке, если это ошибка проверки формы, возвращенная при отправке формы. 

  async handleFormSubmit(e) {
    e.preventDefault();
    const NC = this.state.newCoop;
    delete NC.address.country;

    try {
      const response = await fetch('/coops/',{
        method: "POST",
        body: JSON.stringify(this.state.newCoop),
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json'
        },
      });

      if (response.ok) {
        const result = await response.json();
        console.log('_result_: ', result);
        return result;
      }
      throw await response.json();
    } catch (errors) {
      console.log('_error_: ', errors);
      this.setState({ errors });
    }
  }

Однако, когда есть ошибка, хотя я могу видеть в моем HTML что DIV с сообщением об ошибке присутствует, его не видно. Что мне не хватает? Я предполагаю, что bootstrap предоставляет какой-то стандартный способ сделать мой элемент видимым.

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Чтобы получить видимое сообщение об ошибке, установите isInvalid={Boolean(props.errors[props.name]} для FormControl и type="invalid" для FormControl.Feedback.

Рассмотрите возможность деструктурирования реквизита для упрощения вашего кода.

0 голосов
/ 04 мая 2020

Похоже, вы неправильно устанавливаете состояние ошибки? В ваших комментариях сервер возвращает "error: {phone: Array(1), web_site: Array(1)}", и вы устанавливаете состояние, подобное этому this.setState({ errors }). При этом ваше error состояние все равно будет вашим начальным состоянием.

Попробуйте что-то вроде this.setState({ errors: response.error })

...