Муравьиная форма проверяется с помощью реагирующей пружины - PullRequest
Новая
       24

Муравьиная форма проверяется с помощью реагирующей пружины

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

Я пытаюсь улучшить свой интерфейс Ant Ant Design с помощью реагирующей пружины, но когда я использую компонент формы муравья с реагирующей пружиной [useTrail], каждый раз, когда я печатаю элемент формы, ввод будет размытым, вызвать компонент проверки данных. Кто-нибудь может помочь мне использовать элегантный способ решения этой проблемы? 

const [toggle, set] = useState(true);

const config = { mass: 12, tension: 2000, friction: 200 };

const items = [
    () => <h1 className="title">Welcome!</h1>,
    () => <Form.Item label={`email`}>
      {getFieldDecorator("email", {
        validateFirst: true,
        rules: [
          { type: `email`, message: `please enter the correct email` },
          { required: true, message: `please enter email` }
        ]
      })(
        <Input size="large" prefix={<Icon type="mail" />} />
      )}
    </Form.Item>
];

const trail = useTrail(items.length, {
    config,
    opacity: toggle ? 1 : 0,
    x: toggle ? 0 : 40,
    from: { opacity: 0, x: 40 }
  });

<Form onSubmit={handleSubmit} className="login-form">
      {trail.map(({ height, x, ...rest }, index) => {
        const Item = items[index];
        return (
          <animated.div className={`cp-form-item`}
                        style={{ ...rest, transform: x.interpolate(x => `translate3d(0,${x}px,0)`) }}>
            <Item />
          </animated.div>
        );
      })}
    </Form>

спасибо большое!

...