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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2022 All Rights Reserved Powered by AFFINGER5.