React에서 이벤트 속성 읽어들이기

선택, 옵션에서 여러 가지 속성을 얻는 방법을 몰라서 필기를 했습니다.
외관은 다음과 같다.

값 가져오기

우선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;

텍스트 (항목 표시)

이 의외의 일은 매우 번거롭다.몇 가지 방법이 있는 것 같지만 당분간 패드 하나로 쓸 수 있는 다음 형식을 채택했다.

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;

데이터 속성

마지막으로 데이터 속성입니다.이것도 번거롭지만, 언젠가는 쓸모가 있을 것이다.

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;

잠시 이상.