semanti c -ui-calendar-response мерцание в .tsx - PullRequest
Новая
       86

semanti c -ui-calendar-response мерцание в .tsx

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

Календарь мерцает с использованием DateInput в файлах .tsx

Пытался исправить проблему с помощью Почему мерцание даты в React при фокусировке в поле ввода?

App1.tsx 

import React, { useState } from "react";
import { DateInput } from "semantic-ui-calendar-react";
import "./styles.css";
import "semantic-ui-css/semantic.min.css";

export default function App1() {
  const [date, setDate] = useState("");
  const handleChange = (event, { name, value }) => {
    setDate(value);
  };
  return (
    <div className="App">
      <p>
        App1.tsx - Flicker Fixed after using animation=false but getting build
        error
      </p>
      <div>
        <DateInput
          name="date"
          placeholder="Date"
          value={date}
          popupPosition="top right"
          onChange={handleChange}
          animation={false}
        />
      </div>
    </div>
  );
}

Это вызывает ошибку Type 'false' is not assignable to type 'SemanticTRANSITIONS'

CodeSandbox

Кроме того, я попытался установить для свойства duration значение 0. Это работает. периодически, когда есть один DateInput, но у меня есть несколько элементов управления на странице, если один из них открыт, а я открываю другой, второй мерцает.

Если есть другое исправление для мерцания, позвольте я знаю.

1 Ответ

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

Исправлена ​​эта проблема, заключив DateInput в компонент js и использовав этот компонент из файла tsx.

Установите animation={''} для устранения проблемы, поскольку animation={false} выдает ошибки консоли .

...