Reactでeventの属性の取得

Select, Optionで各種属性を取得する方法に迷ったのでメモ。
見た目は下記のような最低限。

valueの取得

まずはvalue。普通にe.target.valueで取れる。

import React from 'react';

const items = [
  { id: 1, name: "hoge", address: "tokyo", age: 11 },
  { id: 2, name: "foo", address: "osaka", age: 22 },
  { id: 3, name: "boo", address: "fukuoka", age: 33 },
]

function App() {
  return (
    <div style={{ margin: 40 }}>
      <select
        name="username"
+        onChange={(e) => alert(e.target.value)}
      >
        {
          items.map(item => (
            <option value={item.id} key={item.id}>{item.name}</option>
          ))
        }
      </select>
    </div>
  );
}

export default App;

要素名

ここでいうusernameを取得する。あまり単体では利用しないが、

func = (e) => {
	this.setState({[e.target.name]:e.target.value);
}

という感じで利用することが多い。
要素名はnameで取得できる。

import React from 'react';

const items = [
  { id: 1, name: "hoge", address: "tokyo", age: 11 },
  { id: 2, name: "foo", address: "osaka", age: 22 },
  { id: 3, name: "boo", address: "fukuoka", age: 33 },
]

function App() {
  return (
    <div style={{ margin: 40 }}>
      <select
        name="username"
+        onChange={(e) => alert(e.target.name)}
      >
        {
          items.map(item => (
            <option value={item.id} key={item.id}>{item.name}</option>
          ))
        }
      </select>
    </div>
  );
}

export default App;

Text（表示項目）

これが意外とめんどくさい。いくつか方法があるようですが、ワンライナーで書ける下記の形式を一旦採用。

import React from 'react';

const items = [
  { id: 1, name: "hoge", address: "tokyo", age: 11 },
  { id: 2, name: "foo", address: "osaka", age: 22 },
  { id: 3, name: "boo", address: "fukuoka", age: 33 },
]

function App() {
  return (
    <div style={{ margin: 40 }}>
      <select
        name="username"
+        onChange={(e) => alert(e.target.selectedOptions[0].text)}
      >
        {
          items.map(item => (
            <option value={item.id} key={item.id}>{item.name}</option>
          ))
        }
      </select>
    </div>
  );
}

export default App;

data属性

最後にデータ属性。これもめんどいがいつか役に立つはず。

import React from 'react';

const items = [
  { id: 1, name: "hoge", address: "tokyo", age: 11 },
  { id: 2, name: "foo", address: "osaka", age: 22 },
  { id: 3, name: "boo", address: "fukuoka", age: 33 },
]

function App() {
  return (
    <div style={{ margin: 40 }}>
      <select
        name="username"
+        onChange={(e) => alert(e.target[e.target.selectedIndex].getAttribute('data-address'))}
      >
        {
          items.map(item => (
            <option value={item.id} key={item.id} data-address={item.address}>{item.name}</option>
          ))
        }
      </select>
    </div>
  );
}

export default App;

ひとまず以上です。