.tsx 中的语义-ui-日历反应闪烁

Question

日历在闪烁在 .tsx 文件中使用 DateInput

已尝试通过

解决问题

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 时，这会间歇性地工作，但如果其中一个打开并且我在页面上有多个控件再打开一个，第二个闪烁

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

Answer 1

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

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

.tsx 中的语义-ui-日历反应闪烁

semantic-ui-calendar-react flicker in .tsx

javascript

reactjs

semantic-ui

semantic-ui-react