[InputNumber] classNameプロパティに任意のクラスをuseStateで動的に設定すると、デフォルトのクラスが設定した新しいクラスで上書きされる – MESCIUS ナレッジベース

作成日: 2025/03/24 最終更新日: 2025/11/13

文書種別

不具合

発生環境

5.20241.19以降のバージョンで発生

状況

修正済み

詳細

InputNumberでclassNameプロパティに任意のクラスをuseStateで動的に設定すると、デフォルトのクラス（wijmoコンポーネントのwj-xxxクラス）が設定した新しいクラスで上書きされます。

回避方法

この問題はバージョン5.20252.42で修正されました。

修正版を適用しない場合の回避方法は次の通りです。

useEffectフックを使用してコントロールのホスト要素にカスタムクラスを直接適用します。

import React, { useState, useRef, useEffect } from 'react';
import * as wjCore from '@mescius/wijmo';

・・・

function App() {
  const [hasClass, setHasClass] = useState(false);
  const inputNumber = useRef();

  useEffect(() => {
    wjCore.toggleClass(inputNumber.current.control.hostElement, "class", hasClass);
  }, [hasClass]);


  return (
    ・・・

    <wjInput.InputNumber
      ref={inputNumber}
      // className={hasClass ? "class" : ""}

  ・・・