语义 UI 日历反应闪烁 in.tsx

Question

日历闪烁使用 DateInput in.tsx 文件

尝试通过Why datepicker flicker in React when focus in input field? 解决问题？

应用程序1.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'

代码沙盒

另外，我尝试将duration属性设置为 0。当有一个 DateInput 时，这会间歇性地工作，但是如果其中一个打开并且我打开另一个控件，我在页面上有多个控件，第二个控件闪烁。

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

Answer 1

通过将DateInput包装在 js 组件中并从tsx文件中使用该组件来解决此问题。

设置animation={''}以解决问题，因为animation={false}会导致控制台错误。