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

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

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

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

Q&A

解決済

1回答

2080閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

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

0グッド

0クリップ

投稿2022/08/10 02:45

編集2022/08/10 14:21

前提

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

実現したいこと

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

javascript

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

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

javascript

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

該当のソースコード

React.js

1import { memo, useEffect, useState } from "react"; 2 3export const Table = memo(() => { 4 const [text, setText] = useState(""); 5 6 const [strCount, setStrCount] = useState(0); 7 const [strCountB, setStrCountB] = useState(0); 8 9 useEffect(() => { 10 setStrCount(countTargetString(text, "(a|A)")); 11 setStrCountB(countTargetString(text, "(b|B)")); 12 }, [text]); 13 14 const handleChange = (e) => { 15 setText(e.target.value); 16 }; 17 18 // 文字列中に指定した文字の出現回数を取得 19 function countTargetString(str, val) { 20 return (str.match(new RegExp(val, "g")) || []).length; 21 } 22 23 const data = []; 24 let cntNo = 1; 25 for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) { 26 data.push({ 27 No: cntNo++, 28 Name: String.fromCharCode([i]), 29 Score: `${strCount}` 30 }); 31 } 32 33 // const data = [ 34 // { 35 // No: 1, 36 // Name: "A", 37 // Score: `${countTargetString(text, "(a|A)")}` 38 // }, 39 // { 40 // No: 2, 41 // Name: "B", 42 // Score: `${strCountB}` 43 // } 44 // ]; 45 46 return ( 47 <div> 48 <form> 49 <textarea value={text} onChange={handleChange} /> 50 </form> 51 <table border="1" width="500" cellPadding="0"> 52 <th>No</th> 53 <th>Name</th> 54 <th>Score</th> 55 {data.map((tdpod) => ( 56 <tr key={tdpod.No}> 57 <td>{tdpod.No}</td> 58 <td>{tdpod.Name}</td> 59 <td onChange={() => handleChange()}>{tdpod.Score}</td> 60 </tr> 61 ))} 62 </table> 63 </div> 64 ); 65}); 66

試したこと

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

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

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

回答1

0

ベストアンサー

ループを回しながら、1つごとにscoreを詰めていけばいいだけではないでしょうか?

javascript

1function countTargetString(str, val) { 2// フラグにiを入れて、大文字小文字を無視させる 3return (str.match(new RegExp(val, "gi")) || []).length; 4} 5 6/* 中略 */ 7 8for (let i = "A".charCodeAt(0); i <= "Z".charCodeAt(0); i++) { 9data.push({ 10No: cntNo++, 11Name: String.fromCharCode([i]), 12Score: countTargetString(text, String.fromCharCode([i])) 13}); 14}

投稿2022/08/10 02:54

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2022/08/10 03:06

素早いご回答ありがとうございます 出来ました!! 「フラグにiを入れて、大文字小文字を無視させる」😆さすがです!!!! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問