React / React Hooks: я пытаюсь динамически изменить стиль ввода с помощью условной функции, которая срабатывает, когда пользователь покидает ввод - PullRequest
Новая
       22

React / React Hooks: я пытаюсь динамически изменить стиль ввода с помощью условной функции, которая срабатывает, когда пользователь покидает ввод

0 голосов
/ 07 июня 2019

У меня есть компонент, который я построил с использованием React Hooks, который имеет условную функцию для проверки электронной почты. Как сейчас, всякий раз, когда пользователь покидает поле ввода, если поле пустое или формат неправильный, под вводом будет отображаться сообщение об ошибке для типа ошибки соответственно. Я также пытаюсь динамически изменить цвет границы ввода на красный, чтобы еще раз показать, что поле требует внимания. Я довольно новичок в хуках, поэтому я разбираюсь в инструментах, но не могу понять, как заставить это работать как есть 

import React from "react";
import styled from "styled-components";
import { Col, Row, Input, Checkbox } from "antd";

function validateEmail(value) {
  const errors = {};
  if (value === "") {
    errors.email = "Email address is required";
  } else if (!/\S+@\S+\.\S+/.test(value)) {
    errors.email = "Email address is invalid";
  }
  return errors;
}

const CustomerDetails = ({ customer }) => {
  const { contact = {} } = customer || {};
  const [disableInput, setDisableInput] = React.useState(false);
  const [errors, setErrors] = React.useState({});
  const [inputValue, setInputValue] = React.useState(contact.email);

  function onBlur(e) {
    setErrors(validateEmail(e.target.value));
  }

  function clearInput() {
    setInputValue(" ");
  }

  function handleInputChange(event) {
    setInputValue(event.target.value);
  }

  function CheckboxClick() {
    if (!disableInput) {
      clearInput();
    }
    setDisableInput(prevValue => !prevValue);
  }

  return (
    <Container>
      <Row>
        <Col span={8}>
          <StyledInput
            value={inputValue}
            onChange={handleInputChange}
            disabled={disableInput}
            onBlur={onBlur}
          />
          {errors.email && <ErrorDiv>{errors.email}</ErrorDiv>}
        </Col>
        <Col span={8}>
          <Checkbox value={disableInput} onChange={CheckboxClick} /> EMAIL OPT
          OUT
        </Col>
      </Row>
    </Container>
  );
};

const Container = styled.div`
  text-align: left;
`;

const StyledInput = styled(Input)`
  max-width: 100%;
  background: white;

  &&& {
    border: 2px solid black;
    border-radius: 0px;
    height: 35px;
  }
`;

const ErrorDiv = styled.div`
  color: #d11314;
`;

export default CustomerDetails;

1 Ответ

1 голос
/ 08 июня 2019

Вопрос не в крючках, а в том, как лучше применить стиль условно. Как уже упоминалось Jonas Wilms , встроенные стили должны соответствовать этому конкретному случаю. В противном случае, если вы хотите иметь более гибкий «стилизованный компонент», рассмотрите возможность использования props внутри объявления компонента, в вашем случае это может быть: 

const StyledInput = styled(({ isError, ...rest }) => <Input {...rest} />)`
  max-width: 100%;
  background: white;

  &&& {
    border: 2px solid ${props => props.isError ? 'red' : 'black'};
    border-radius: 0px;
    height: 35px;
  }
`;

так что, когда вы его визуализируете - просто передайте этот реквизит прямо как: 

<StyledInput
  ...
  isError={!!errors.email}
/>
...