在.tsx中，语义-ui-calendar-react闪烁。

Question

在.tsx文件中使用DateInput时，日历会闪烁。

尝试通过以下方式解决该问题 为什么在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 当只有一个DateInput时，这个功能会间歇性地工作，但我在页面上有多个控件，如果其中一个控件被打开，我再打开另一个，第二个控件就会闪烁。

如果有任何其他解决闪烁的方法，请告诉我。

Answer 1

通过包装 DateInput 内的一个js组件，并从该组件的 tsx 文件。

设置 animation={''} 为解决这个问题 animation={false} 给予控制台错误。