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

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

2

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

3

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

4

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

5

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

-Blockchain, code, Metaverse, VR
-, ,

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