度々 お世話になります。
目下、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との組み合わせだと、何を変えなければならないのでしょうか?
応答ありがとうございます。
どうも、使用している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>
さて、次は 何か試せばよいことは 無いでしょうか?