[解決済み] Material-UIの選択項目がselectedValueに置き換わる。

質問

ごきげんよう。

私はReactでいくつかのMaterial-UIコンポーネントを使用したコードに取り組んでいます。私は現在、MenuItemの子を持つSelectコンポーネントを持っています。選択コンポーネントのオプションは、名前を持つ異なるdivです。私が望むのは、Select コンポーネントをレンダリングし、値が選択されると、その値の div がレンダリングされ、Select コンポーネントが置き換えられることです。

以下は、Selectコンポーネントのオプションです。

const test_options = [
    {
      name: "DIV 1",
      div: (
        <div style={{ backgroundColor: "red", height: 50, width: 100 }}>
          Div 1
        </div>
      ),
    },
    {
      name: "DIV 2",
      div: (
        <div style={{ backgroundColor: "blue", height: 50, width: 100 }}>
          Div2
        </div>
      ),
    },
  ]; 

Dropdown/Selectコンポーネントを紹介します。

function Dropdown() {
    return (
      <FormControl variant="outlined">
        <InputLabel id="demo-simple-select-outlined-label">
          Select a div
        </InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={test_options.name}
          key={test_options.name}
          label="Select a div"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          {test_options.map((options) => (
            <MenuItem
              button
              key={options.name}
              value={options.name}
            >
              {options.div}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    );
  } 

ということで、ドロップダウンに options.name をテキストとして使用し、オプションが選択されたときにドロップダウンを選択したものに置き換えるようにしたい。 options.div . つまり、ドロップダウンは値が選択されると消えて、その値の div に置き換えられるのです。

ここで、すべてのコードをまとめてみました。

import React from "react";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

export default function DropdownTest() {
  const test_options = [
    {
      name: "DIV 1",
      div: (
        <div style={{ backgroundColor: "red", height: 50, width: 100 }}>
          Div 1
        </div>
      ),
    },
    {
      name: "DIV 2",
      div: (
        <div style={{ backgroundColor: "blue", height: 50, width: 100 }}>
          Div 2
        </div>
      ),
    },
  ];

  function Dropdown() {
    return (
      <FormControl variant="outlined" style={{ width: 200 }}>
        <InputLabel id="demo-simple-select-outlined-label">
          Select a div
        </InputLabel>
        <Select
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          value={test_options.name}
          key={test_options.name}
          label="Select a div"
        >
          <MenuItem value="">
            <em>None</em>
          </MenuItem>
          {test_options.map((options) => (
            <MenuItem button key={options.name} value={options.name}>
              {options.div}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
    );
  }

  return <Dropdown></Dropdown>;
}

解決方法は？

なんとか解決しました。ドロップダウンのオプションがクリックされると、選択されたdivに置き換えられます。

import React, { useState } from "react";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

export default function DropdownTest() {
  const test_options = [
    {
      name: "DIV 1",
      div: (
        <div style={{ backgroundColor: "red", height: 50, width: 100 }}>
          Div 1
        </div>
      ),
    },
    {
      name: "DIV 2",
      div: (
        <div style={{ backgroundColor: "blue", height: 50, width: 100 }}>
          Div 2
        </div>
      ),
    },
  ];

  function Dropdown(props) {
    const [value, setState] = useState("None"); // keep track of the current selected dropdown option
    console.log("Start value is " + value);
    const onOptionChange = (event: React.ChangeEvent<{ value: unknown }>) => {
      const chosen_div = test_options.findIndex(
        (obj) => obj.name === event.target.value
      );
      const value = test_options[chosen_div].div;
      console.log("Clicked value is " + value);
      ///      console.log(test_options[1].div);
      setState(value); // update state of the current selected value
    };
    if (value === "None") {
      return (
        <FormControl variant="outlined" style={{ width: 200 }}>
          <InputLabel id="demo-simple-select-outlined-label">
            Select a div
          </InputLabel>
          <Select
            labelId="demo-simple-select-outlined-label"
            id="demo-simple-select-outlined"
            value={value} // Tell material ui select component what the current selected option is.
            label="Select a div"
            onChange={onOptionChange} // listen for on dropdown menu change
          >
            <MenuItem value="">
              <em>None</em>
            </MenuItem>
            {props.options.map((options) => (
              <MenuItem button key={options.name} value={options.name}>
                {options.div}
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      );
    } else {
      return <div>{value}</div>;
    }
  }
  return <Dropdown options={test_options}></Dropdown>;
}