map()で配列の各要素にonClickを設定したい

Question

やりたいこと

// arrayからhtmlを作りたい
const array = ['The', 'quick', 'brown', 'fox']
const html = `<span onClick={handleClick}>The</span> <span onClick={handleClick}>quick</span> <span onClick={handleClick}>brown</span> <span onClick={handleClick}>fox</span>`
// handleClickは、clic時に該当spanのテキストを取得する関数

困っていること

• array.map()でどのようにhandleClickを書けばいいかわからない
• handleClickをどう書けばspanのテキストが取得できるかわからない

現状のコード

const handleWordClick = (event: React.MouseEvent) =>
  console.log((event.target as HTMLSpanElement).innerHTML);


  const texthtml = textArray
    .map(
      (w, i) =>
        `<span key=${i} onClick="${handleWordClick}">
        ${w}
      </span>`,
    )
    .join(' ');

試したこと

• this.handleWordClickと記述
• map()の外で

<span onClick={event => console.log(event.currentTarget.textContent)}>

で書くとやりたいことができる（mapの中でやりたい)

どう書けば目的とする挙動が得られるか知りたいです

Comments

[maisumakun]

React環境でしょうか、それとも何か別のライブラリをベースにしていますでしょうか？

[maisumakun]

…すみません、React.jsのタグも付いていましたね。

[maisumakun]

最終形として得るものは「テキストでなければならない」のでしょうか。ReactのVDOMのまま得てどこかに埋め込む、ということはできない感じでしょうか？

[olee46]

可能です
Textareaの入力を取得
→エスケープしたものをデータベースに格納
→データベースから取り出して、クリック処理が可能なかたちで別のページで表示
という流れをイメージしています

Answer 1

文字列にしなくていいのであれば、そのままReact DOMを生成するようにすればいいだけです。

const vdoms = textArray.map((w, i) =>
  <span key={i} onClick={handleWordClick}>
    {w}
  </span>
);