Blockchain code Metaverse VR

SmartContract×VR×Crypto(598)

スポンサーリンク

//tips

目のMPが足りない。脳波による視覚拡張は検討すべき。

//smart contract

Board[id]からデータベースへのコメント登録に対して、自身のlocalstorage内のusernameを参照したものを登録できるようにした。

{openflag && (
<div>
<Typography variant="h4">Add comments </Typography>
<form noValidate autoComplete="off" onSubmit={handleOnAddcomments}>

あとは見栄えが良くなるように編集。

文字の太さも変える。

<Typography sx={{ fontSize: 25 }} >{item.chat}</Typography>

<h2>タグを外し、Typographyに変更。

調べてみたがsxプロップではem,remは使えないよう。

emは、直近の親要素を基準とした相対指定、
remは、常にroot要素(html要素)を基準サイズとした相対指定。

https://mui.com/system/the-sx-prop/

さらに既に記載されている文言をクリックすると、そちらの番号を>>6のような形で返信対象として、記入してくれる機能を追加する。

コメントの追加表示はTextField のなかのsetDetailsに随時反映されているはずのなので、テキストをクリックされたら、そちらに自動的に書き込み、コメント箇所までスクロールして下がるようにする。

{openflag && (
<div>
<Typography variant="h4">Add comments </Typography>
<form noValidate autoComplete="off" onSubmit={handleOnAddcomments}>

<TextField
onChange={(e)=>setDetails(e.target.value)}
variant="outlined"
color="secondary"
fullWidth
required
/>

テキストのdevにonclickを差し込むところから。

{ninja[0].text&&
ninja[0].text.map((item,index) => (
<div item key={index}>

<div className={classes.titleback} onClick={()=>{setDetails(">>abc"+index)}}>として様子を見る。

クリックしても内容が入力欄に表示されなかったので value={details}を追加。

これにてしっかり入力欄に内容が表示された。

現在はコメント数が少ないので問題ないがコメント数が多くなった際に備えて、コメントをクリックしたら、下部の入力欄に飛ぶように設定を加える。

Next.jsでのanchorの使い方について調べる。

Linkも使えそうだったが、routerの方が馴染みがあったのでこちらを使用する。

https://nextjs.org/docs/api-reference/next/router

やりたいことと違った。linkでの実装にトライ。

import Link from 'next/link'

飛ばしたい場所に下記を設置。
<div id="first-seciton">SECTION 1</div>

クリックさせて移動させるものに<Link href="#first-section"><a>My first section</a></Link>を設置。

大量のコメントを書き込み、上部に設置した<Link href="#first-section"><a>My first section</a></Link>をクリックするも反応なし。

なぜかサーバーが際読み込みされる。

複数パターンを試して解決。

・機能しない
<Link href="#first-section"><a>My first section</a></Link>
<div id="first-seciton">SECTION 1</div>

・機能する
<Link href="#some"><a>that one now works</a></Link><br/>
<a href="#some">this one works</a>
<a name="some" id="some"/>#some

<Link href="#first"><a>My first section</a></Link>
<a name="first" id="first"/>#first-seciton
<a id="first"/>#first-seciton

横棒をidは認識できなかったよう。なんてトラップだ。

人気の記事

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.