Реагировать на ввод заполнителя - анимация пишущей машинки? - PullRequest
Новая
       4

Реагировать на ввод заполнителя - анимация пишущей машинки?

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

Я пытаюсь добавить анимацию ввода текста в качестве заполнителя в моей форме> вход в реагировать. Я пробовал разные npm пакеты и методы, но ничто не касается анимации внутри заполнителя в частности. какие-либо советы или идеи вы можете поделиться со мной? ты / 

      className="search-input"
      required
      type="text"
      value={searchValue}
      placeholder="type a name"
      onChange={handleChange}
    />

1 Ответ

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

Вы можете попробовать что-то вроде этого Машинопись: 

import React, {useState, useEffect} from "react";


export const AnimatedInput = ({placeholder: passedPlaceholder = "", ...passedProps}: React.InputHTMLAttributes<HTMLInputElement>) => {
    const [placeholder, setPlaceholder] = useState(passedPlaceholder.slice(0, 0));
    const [placeholderIndex, setPlaceholderIndex] = useState(0);


    useEffect(() => {
        const intr = setInterval(() => {
            setPlaceholder(passedPlaceholder.slice(0, placeholderIndex));
            if (placeholderIndex + 1 > passedPlaceholder.length) {
                setPlaceholderIndex(0)
            } else {
                setPlaceholderIndex(placeholderIndex + 1)
            }
        }, 150);
        return () => {
            clearInterval(intr)
        }
    },);


    return <input {...passedProps} placeholder={placeholder}/>
};

Javascript: 

import React, {useState, useEffect} from "react";


export const AnimatedInput = ({placeholder: passedPlaceholder = "", ...passedProps}) => {
    const [placeholder, setPlaceholder] = useState(passedPlaceholder.slice(0, 0));
    const [placeholderIndex, setPlaceholderIndex] = useState(0);


    useEffect(() => {
        const intr = setInterval(() => {
            setPlaceholder(passedPlaceholder.slice(0, placeholderIndex));
            if (placeholderIndex + 1 > passedPlaceholder.length) {
                setPlaceholderIndex(0)
            } else {
                setPlaceholderIndex(placeholderIndex + 1)
            }
        }, 150);
        return () => {
            clearInterval(intr)
        }
    },);


    return <input {...passedProps} placeholder={placeholder}/>
};

Использование: 

<AnimatedInput placeholder="type a name"/>
...