Reactでクリックされたのタグで囲まれた中身を取得したい。

前提・実現したいこと

Reactでクリックされたの中身を取得したい。

例えばジャガイモが押されたらジャガイモと、大根が押されたら大根とconsoleに表示したいです。
一つ一つにdocument.getElementById()などを付与せずに行う方法があれば教えてください。

該当のソースコード


import React from "react"
import "./wordlist.css"

class Wordlist extends React.Component{

render(){
return (
<div className="wordfont">
<span onClick={this.selected}>大根</span>
<span onClick={this.selected}>玉ねぎ</span>
<span onClick={this.selected}>キャベツ</span>
<span onClick={this.selected}>白菜</span>
<span onClick={this.selected}>人参</span>
<span onClick={this.selected}>トマト</span>
<span onClick={this.selected}>きゅうり</span>
<span onClick={this.selected}>かぼちゃ</span>
<span onClick={this.selected}>レタス</span>
<span onClick={this.selected}>もやし</span>
<span onClick={this.selected}>ねぎ</span>
</div>
)
}
selected(){
console.log(innerHTML)
}
}
export default Wordlist

試したこと

console.log(innerHTML)や
console.log(this.innerHTML)
などを試しましたがエラーが起きてしまいます。

ねぎ
//中略
console.log(this.innerHTML)

上ではundefinedとなりました。

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

React+Gatsby

行動規範の内容に同意します

回答3件

jun68yktさんのコードを骨組みに、
maisumakunさんのコードの書き方も参考にさせていただきました。
本当にありがとうございました。

import React from "react"
import "./wordlist.css"

const vegetables = [ 
  '大根', '玉ねぎ', 'キャベツ', '白菜', '人参', 'トマト',
  'きゅうり', 'かぼちゃ', 'レタス', 'もやし', 'ねぎ',
];

class Wordlist extends React.Component {

  onWordSelected(e) {
    console.log(e.target.innerText);
  }

  render() {
    return (
      <div className="wordfont">
      {vegetables.map(word => 
        <span
          key={word}
          onClick={this.onWordSelected}>
          {word}
        </span>)
      }
    </div>
    );
  }
}



export default Wordlist

投稿2018/12/09 05:39

編集2018/12/09 05:41

NinnJinn

総合スコア18

ベストアンサー

こんにちは

以下のような感じになるかなと思います。

JSX
1class Wordlist extends React.Component {
2
3  onWordSelected(e) {
4    console.log(e.target.innerText);
5  }
6
7  render() {
8    return (
9      <div className="wordfont">
10        {this.props.words.map(word => 
11          <span
12            key={word}
13            onClick={this.onWordSelected}>
14            {word}
15          </span>)
16        }
17      </div>
18    );
19  }
20}

JSX
1const vegetables = [ 
2  '大根', '玉ねぎ', 'キャベツ', '白菜', '人参', 'トマト',
3  'きゅうり', 'かぼちゃ', 'レタス', 'もやし', 'ねぎ',
4];
5
6ReactDOM.render(<Wordlist words={vegetables} />, document.querySelector("#app"))

html
1<div id="app"></div>

以下にて、上記コードの動作を確認できます。

https://jsfiddle.net/jun68ykt/z8amqcLs/1/

以上参考になれば幸いです。

投稿2018/12/07 22:47

編集2018/12/07 23:45

jun68ykt

総合スコア9058

いちおう、以下のようにすればinnerHTMLの取得はできます。

javascript
1selected(e){
2  console.log(e.target.innerHTML)
3}

もっとも、HTMLの構造に頼るのはあまりReact的ではありません。すべてをデータとして管理させたほうがいいでしょう。

javascript
1const vegetables = ['大根', '玉ねぎ', /*後略*/];
2
3class Wordlist extends React.Component{
4
5  render(){
6    return (
7      <div className="wordfont">
8        {
9          vegetables.map(item => (
10            // 注：このままだとrender()のたびに関数が再生成してしまうので、
11            // 実用する場合にはその場でイベントハンドラを書かないほうがいい
12            <span onClick={() => console.log(item)} key={item}>{item}</span>
13          ))
14        }
15      </div>
16    )
17  }
18}