Javascript / CSS: создайте пользовательский CSS и оберните два поля формы в красную рамку в случае ошибки - PullRequest
Новая
       13

Javascript / CSS: создайте пользовательский CSS и оберните два поля формы в красную рамку в случае ошибки

0 голосов
/ 29 апреля 2020

Как создать новую пользовательскую границу и использовать ее для переноса этих двух компонентов?

Когда searchComponent находится в состоянии ошибки (посредством проверки входного поля внешнего интерфейса), я передаю состояние ошибки в раскрывающийся компонент , но красная граница, которую он создает, не выглядит так же, как и в searchComponent. Я пытаюсь получить выпадающий и searchComponent равномерно выделены красной рамкой в ​​случае ошибки проверки. enter image description here КРЮКИ: 

const [searchInputError, setSearchInputError] = useState(false);
const [searchInputErrorText, setSearchInputErrorText] = useState("");

КОМПОНЕНТЫ: 

     <div className="l-grid__col l-grid__col--5 **searchComponent**" data-testid="searchComponent">
                    <Form onSubmit={async () => await fetchData()}>
                    <FormField
                        className="textInput"
                        data-testid="textInput"
                        onChange={e => superOnChange(param, e.target.value)}
                        onBlur={e => {
                            if(param === "number") {
                                validateNumber(e.target.value, setSearchInputError, setSearchInputErrorText);
                                validateNumberLength(e.target.value, setSearchInputError, setSearchInputErrorText, setInputValue);
                            }
                        }


    affixLeft={
     <Select
         data-testid="**dropdown**"
         options={searchOptions()}
         onSelect={e => {
             setParam(e.value);
             superOnChange(e.value, inputValue);
         }}
         hasError = {searchInputError}
         value={inputValue}
     />

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Я бы просто стилизовал div вокруг компонентов с ошибками в зависимости от состояния ошибок и использовал бы сообщение об ошибке в качестве значения: 

const [errors, setErrors] = useState([])
function findError(attr) {
  return errors.find(err => err.attr === attr)
}
...
return (
  <div style={{ border: findError("attrOne") ? "1px solid red" : "none" }}>
    <FormField name="attrOne" ... />
    {findError("attrOne") ? <span>{findError("attrOne")</span> : null }}
  </div>

  <div style={{ border: findError("attrTwo") ? "1px solid red" : "none" }}>
    <Select name="attrTwo" ... />
    {findError("attrTwo") ? <span>{findError("attrTwo")</span> : null }}
  </div>
)

Структура ошибки - это объект с именем поля в качестве ключ: 

[
  { attr: "attrOne", error: "This field is required" },
  { attr: "attrTwo", error: "You must select one option" },
]

Если объект существует в массиве ошибок, который соответствует имени attr, в этом поле есть ошибка, если нет, то нет. Простой, элегантный и роскошный.

0 голосов
/ 29 апреля 2020

Не можете ли вы получить доступ к состоянию в раскрывающемся списке? 

 <Select
         data-testid="**dropdown**"
         options={searchOptions()}
         onSelect={e => {
             setParam(e.value);
             superOnChange(e.value, inputValue);
         }}
         value={inputValue}
         error={searchInputErrorText}
     />
...