Material UI 入力データ取得方法

Material UI TextField と DropDownMenu からデータを取得する (JavaScript, React.js, Material-Design)

Material UI は、React.js アプリケーションで Material Design のコンポーネントを提供するライブラリです。その中でも、TextField と DropDownMenu は、ユーザー入力の取得に頻繁に使用されます。

TextField からデータを取得する

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

function MyTextField() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <TextField
      label="Enter your name"
      value={value}
      onChange={handleChange}
    />
  );
}

• TextFieldコンポーネント
  
  • label属性: フィールドのラベルを設定します。
  • value属性: TextField の現在の値を設定します。
  • onChange属性: 値が変更されたときに呼び出されるイベントハンドラーを設定します。
• handleChange関数
  TextField の値が変更されたときに呼び出され、新しい値を setValue 関数を使用して状態変数に更新します。
• useStateフック
  値を管理するための状態変数 value を作成します。

DropDownMenu からデータを取得する

import React, { useState } from 'react';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

function MyDropDownMenu() {
  const [age, setAge] = useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={age}
      onChange={handleChange}
    >
      <   MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}

• MenuItemコンポーネント
  ドロップダウンメニューの各オプションを表します。
• S   electコンポーネント
  ドロップダウンメニューを作成します。

要約

• DropDownMenu の場合は、event.target.value を使用して選択されたオプションの値を取得します。
• TextField の場合は、event.target.value を使用して入力された値を取得します。
• TextField と DropDownMenu の値を取得するには、状態変数を使用して値を管理し、onChange イベントハンドラーを使用して値の変更を検出します。

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

function MyTextField() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <TextField
      label="Enter your name"
      value={value}
      onChange={handleChange}
    />
  );
}

import React, { useState } from 'react';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

function MyDropDownMenu() {
  const [age, setAge] = useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={age}
      onChange={handleChange}
    >
      <   MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}

import React, { useState } from 'react';
import TextField from '@mui/material/TextField';

function MyTextField() {
  const [value, setValue] = useState('');

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <TextField
      label="Enter your name"
      value={value}
      onChange={handleChange}
    />
  );
}

import React, { useRef } from 'react';
import TextField from '@mui/material/TextField';

function MyTextField() {
  const inputRef = useRef(null);

  const getValue = () => {
    return inputRef.current.value;
  };

  return (
    <TextField
      label="Enter your name"
      inputRef={inputRef}
    />
  );
}

• getValue関数
  TextField の値を取得するために使用されます。
• useRefフック
  TextField の DOM 要素への参照を保持します。

import React, { useState } from 'react';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

function MyDropDownMenu() {
  const [age, setAge] = useState('');

  const handleChange = (event) => {
    setAge(event.target.value);
  };

  return (
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      value={age}
      onChange={handleChange}
    >
      <   MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}

import React, { useRef } from 'react';
import MenuItem from '@mui/material/MenuItem';
import Select from '@mui/material/Select';

function MyDropDownMenu() {
  const selectRef = useRef(null);

  const getValue = () => {
    return selectRef.current.value;
  };

  return (
    <Select
      labelId="demo-simple-select-label"
      id="demo-simple-select"
      inputRef={selectRef}
    >
      <MenuItem value={10}>Ten</MenuItem>
      <MenuItem value={20}>Twenty</MenuItem>
      <MenuItem value={30}>Thirty</MenuItem>
    </Select>
  );
}