kintone-ui-componentとReactの組み合わせで、setStateのcallBackが呼び出されず画面更新がされない

度々 お世話になります。

 

目下、kintoneの詳細画面の中で動くpluginを、kintone-ui-componentとReactとを組み合わせて作りつつあります。

ところが、kintone-ui-componentのIconButtonのonClickイベント・ハンドラの延長で、ReactのsetStateメソッドを呼び出しても、画面更新されませんでした。

また、setStateメソッドに指定したcallback関数も 呼び出されませんでした。

添付の図は、問題現象が発生したコード片と、consoleログです。

 

つきましては、何方か? kintone-ui-componentとReactのcomponent classのsetStateメソッドの 正しい使い方を 教示 いただけませんでしょうか?

 

kintoneのpluginとは無関係な環境では、上図に示すようなReactの使い方で 上手く動いたhtml画面は 作ったことはあります。

その経験だけでは足りないようで、、

kintone-ui-componentとの組み合わせだと、何を変えなければならないのでしょうか?

 

https://github.com/kintone-labs/kintone-ui-component/issues/542#issuecomment-851861411

応答ありがとうございます。

どうも、使用しているkintone-ui-componentやReactのバージョンに関する前提の提示が足りなかったようですね。

提示いただいた情報は、kintone-ui-componentのv1系に対するReactサポート要望と、サポータの回答で、

「今のところReactバージョンをサポートするための具体的な計画はありません。」

と、まあ、インリメンタ側の公式見解は、サポート拒否のようですから、「動かせなくて当然」と解釈すべきなのでしょう。

 

でも、私は、kitone-ui-component v1系は htmlタグ形式で コンポーネントを定義できなくて不便なので、

reactがサポートされていたv0系の"@kintone/kintone-ui-component": "^0.8.3"を使っています。

この組み合わせで作られたkintoneプラグインは、カスタム関連レコードプラグイン等が在るので、真似ても良いのかと思っていました。

でも、「もうV0系を使うと、冷たい視線を浴びる時期になっている」ということを示唆するのが、この応答だという事ですね???


とりあえず、reactのsetStateを呼び出す切欠のボタン部品を、v0系の@kintone/kintone-ui-component"のButtonから、React標準の"button"部品に差し替えてみました。

それでも、冒頭の問題は再現し、setStateによる再描画やcallbackの呼び出しは発生しませんでした。

<span>
      <button onClick={this.onClickLeft} title="前へ" aria-label="前へ" className="gaia-ui-listtable-pagercomponent-prev" itemProp="prev" type="button">≺</button>
      {this.state.message}
      <button onClick={this.onClickRight} title="次へ" aria-label="次へ" className="gaia-ui-listtable-pagercomponent-next" itemProp="next" type="button">≻</button>
</span>

 

さて、次は 何か試せばよいことは 無いでしょうか?