Blockchain code Metaverse VR

Crypto×VR×SmartContract(522)

スポンサーリンク

//tips

//smart contract

このdeposit欄の表示・非表示を操れるボタンも追加する。

表示は<Deposits depo={depo}/>で扱われているので、depositidがnullの場合は非表示という仕様にするか。

一番この表示を管理したいのは自分以外の人も見る[id]ページなのでそちらにも対応できるないようにする。

{closeflag && (
<div>
<Deposits depo={depo}/>
</div>)
}

このclsetagの初期設定はfalseにし、depositidが確認できたらtrueにする。

const [closeflag,setClose]=useState(false)

if(depo){setClose(true)}を設定したら無限ループになる警告が出たので

if(depo&&closeflag==false){setClose(true)}

こちらに変更。

これで登録debankidが存在する場合には表示されるようになった。[id]にもこちらを反映。見せたくない人はdebankidを登録しなければ表示されないようにした。

間違って登録してしまった人向けの削除ボタンも追加しておくか。

if(element.debankid!=null){
currentdid=element.debankid
currentdocid=element.docid
}
})

if(currentdid===null){
console.log('aaa')

}else{
console.log('bbb')
console.log(currentdid)

const docRefd=doc(firebaseApp,"mydata",currentdocid)
deleteDoc(docRefd,{
debankid: deleteField()
}).then(()=>{router.reload()})

onClick={handleOnDebankdelete}

ImportでdeleteFieldも追加。ばっちり消せている。再登録も問題なし。

twitterの登録フォームの追加も行おうかと考えたが、先にdelteアクション時にポップアップの実装を行うか。

reactjs-popupをインポートすれば瞬殺できるようだが背景にはmodal作成・利用などのテーマがありそう。

https://www.geeksforgeeks.org/how-to-add-popup-in-nextjs/

Modal component with Next.js

https://blog.microcms.io/how-to-react-hooks-use-modal/

https://qiita.com/onikan/items/98983d296fa16cf947de

まずは試しに何かpopupさせてみる。

npm i reactjs-popup

import Popup from 'reactjs-popup';
import 'reactjs-popup/dist/index.css';

POPUPトライ
<div>
<h4>NextJs Popup - GeeksforGeeks</h4>
<Popup trigger={<button> Click to open popup </button>}
position="right center">
<div>GeeksforGeeks</div>
<button>Click here</button>
</Popup>
</div>

こちらで即座にpopupが完了できた。

体裁を整えたい場合には'reactjs-popup/dist/index.css’;を修正する必要があるか。

今のところclick hereを押しても次の動作が発生しないのでそこも設定する。

そこはButtonコンポーネントに囲んで解決できた。

POPUPトライ
<div>
<h4>NextJs Popup - GeeksforGeeks</h4>
<Popup trigger={<button> Click to open popup </button>}
position="right center">
<div>GeeksforGeeks</div>

<Button
type="submit"
varient="contained"
onClick={()=>console.log('clickされました')}
>
Click here
</Button>
</Popup>
</div>

ボタンの色形が変わるのはあまり良くなく感じたので、Buttonコンポーネントに仕様を統一した。

POPアップを閉じる方法も作成する。

https://react-popup.elazizi.com/controlled-popup/

import React, { useRef } from 'react';

useRefを使用するのが無難そうなのでそちらで対応。

const ref = useRef();

const useref = useRef();
const closeTooltip = () => useref.current.close();

Firestorageのrefと変数が被ってしまうので注意が必要。

<Button
type="submit"
varient="contained"
onClick={closeTooltip}
>
NO
</Button>

こちらの形に設定した。

エラーが発生。原因を探してみるおと <Popup ref={useref} trigger={とrefを入れる必要があったよう。

https://qiita.com/oedkty/items/d2e01acf945849c5f9f7

これでもやはりエラー。

onClick={() => console.log(popup.current)}としたところpopupが取得できていないことがわかる。

<Popup ref={popup} trigger={としたらオブジェクトを取得できた。

HTML要素にrefという属性でuseRefの値を渡してあげることで参照できるというuseRefの基本操作のところの問題だった。

https://qiita.com/cheez921/items/9a5659f4b94662b4fd1e

無事稼働。

Twitterの処置に移るか。同じくカードのドラッグで順番を入れ替えることができる機能も追加していきたいところ。

 

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.