質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

React テーブルの値を更新したい セルの個別取得はどうすれば実現できますでしょうか

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1回答

0リアクション

0クリップ

291閲覧

投稿2022/08/10 02:45

編集2022/08/10 03:41

前提

Reactでtextareaの中で指定した文字の出現回数を表にするアプリを
作っています
テーブルのScoreのセルにカウントされた数字が入ります
https://codesandbox.io/s/useeffect-text-table-s0flxr?file=/src/components/Table.jsx

実現したいこと

テーブルのScoreのセルにカウントされた数字を入れたいです
下記のように1個づつScore:にメソッドやState を定義すれば実現できるのですが、

javascript

const data = [ { No: 1, Name: "A", Score: `${countTargetString(text, "(a|A)")}` //指定した文字の出現回数を取得する関数 }, { No: 2, Name: "B", Score: `${strCountB}` //もしくはStateを定義 } ];

下記のようにfor文で繰り返し文にした場合、Score:の値はどうすればよろしいでしょうか

javascript

const data = []; let cntNo = 1; for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) { data.push({ No: cntNo++, Name: String.fromCharCode([i]), Score: `${strCount}` }); }

該当のソースコード

React.js

import { memo, useEffect, useState } from "react"; export const Table = memo(() => { const [text, setText] = useState(""); const [strCount, setStrCount] = useState(0); const [strCountB, setStrCountB] = useState(0); useEffect(() => { setStrCount(countTargetString(text, "(a|A)")); setStrCountB(countTargetString(text, "(b|B)")); }, [text]); const handleChange = (e) => { setText(e.target.value); }; // 文字列中に指定した文字の出現回数を取得 function countTargetString(str, val) { return (str.match(new RegExp(val, "g")) || []).length; } const data = []; let cntNo = 1; for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) { data.push({ No: cntNo++, Name: String.fromCharCode([i]), Score: `${strCount}` }); } // const data = [ // { // No: 1, // Name: "A", // Score: `${countTargetString(text, "(a|A)")}` // }, // { // No: 2, // Name: "B", // Score: `${strCountB}` // } // ]; return ( <div> <form> <textarea value={text} onChange={handleChange} /> </form> <table border="1" width="500" cellPadding="0"> <th>No</th> <th>Name</th> <th>Score</th> {data.map((tdpod) => ( <tr key={tdpod.No}> <td>{tdpod.No}</td> <td>{tdpod.Name}</td> <td onChange={() => handleChange()}>{tdpod.Score}</td> </tr> ))} </table> </div> ); });

試したこと

JavaScriptですとquerySelectorでtdを取得して、td[2].textContent  みたいにセルを特定した書き方が出来たのですが、Reactではどうするのでしょうか
swich文を試しましたが、うまくいかず、お知恵をお借りしたく質問致しました

補足情報(FW/ツールのバージョンなど)

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/08/10 03:02依頼された後にこの質問は修正されています

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

slemntqe

2022/08/10 03:06

あなたの質問文に書かれているコードは非常に見づらいです。コード挿入用タグを利用して下さい。回答者の気持ちを考えて質問して下さい。
退会済みユーザー

退会済みユーザー

2022/08/10 03:42

失礼致しました
退会済みユーザー

退会済みユーザー

2022/08/10 04:39

コードが見づらいのは申し訳ありませんでした。気をつけます。 人は感情で生きていますので、もう少し柔らかい言い方をして下さると助かります。 様々な所で様々な話を聞きますが、仕事ができるから、コードが書けるからと言って態度が悪いというような話をよく聞きます。エンジニアに限らず、他の職種でもです。 あなたが悪い訳ではないですが、せっかくご指摘してくださったのにもったいないと思いまして、もう少し人の気持ちを考えて頂けるとあなた自身の人生ももっと良くなると思います。
slemntqe

2022/08/10 05:15

あなたのteratailの投稿は全てコードがコード挿入用タグを利用して書かれていません。 一部でコード挿入用タグを使用しているのでコード挿入用タグの存在や利用方法を知らない訳でも無いでしょう。 指摘しなければ今後も同様の投稿をされるつもりだったのではないでしょうか? 前回の質問本文のコードも見るに堪えないものです。 私ではない人物によって低評価も付けられている状況です。 もしあなたが回答者の立場となった場合に見づらいという感情にならないでしょうか。 https://teratail.com/questions/359484 丁寧な伝え方をしているつもりですが、どこまでへりくだった言い方をすればあなたにとって都合の良い言い方になりますか。私にとってあなたはお客様ではありませんよ。 反論している時点で反省の色が見えません。もう一度ご自身の事を十分に見つめ直してはいかがでしょうか。 あなたは何故私があえて指摘しているかの理由を考える必要があります。 「見づらい」だけでなくそれに派生する物もあります。 どうしても反論しなければ気が済まない人のようですので私はこれ以上返答しません。 プログラムだけでなくご自身の事について十分に見つめ直してはいかがでしょうか。
退会済みユーザー

退会済みユーザー

2022/08/10 05:21

最初からそういう風に言ってくれればいいのに 申し訳ありません。修正いたします。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。