Reactjs 材料界面选择替换为选择上的selectedValue

你好

我正在使用一些重要的UI组件编写一段代码。我目前有一个带有MenuItem子项的Select组件。选择组件的选项是具有名称的不同div。我想要的是渲染选择组件，当选择一个值时，该值的div被渲染-替换选择组件

以下是选择组件的选项：

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>
      ),
    },
  ]; 

---

查看您的代码片段，您似乎没有注意下拉/选择组件中选定选项的更改，也没有告诉Material UI 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>
    }
  ]

  return <Dropdown options={test_options}></Dropdown>
}

function Dropdown(props) {
  const [value, setState] = useState("") // keep track of the current selected dropdown option
  const onOptionChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    const value = event.target.value as string
    setState(value) // update state of the current selected value
  }
  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>
  )
}

导出默认函数DropdownTest（）{
常量测试选项=[
{
名称:"第一组"，
分区：分区1
},
{
名称:"第二组"，
分区：分区2
}
]
返回
}
功能下拉列表（道具）{
const[value，setState]=useState（“”//跟踪当前选定的下拉选项
const onOptionChange=（事件：React.ChangeEvent）=>{
常量值=字符串形式的event.target.value
setState（value）//更新当前选定值的状态
}
返回(
选择一个div
没有一个
{props.options.map（options=>(
{options.div}
))}
)
}

我设法找到了一个解决方案。单击下拉列表中的某个选项时，它将被选定的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>;
}

import React，{useState}来自“React”；
从“@material ui/core/InputLabel”导入InputLabel；
从“@material ui/core/MenuItem”导入菜单项；
从“@material ui/core/FormControl”导入FormControl；
从“@material ui/core/Select”导入选择；
导出默认函数DropdownTest（）{
常量测试选项=[
{
名称:"第一组"，
分区：(
第一组
),
},
{
名称:"第二组"，
分区：(
第2组
),
},
];
功能下拉列表（道具）{
const[value，setState]=useState（“None”）；//跟踪当前选定的下拉选项
console.log（“起始值为”+值）；
const onOptionChange=（事件：React.ChangeEvent）=>{
const selected_div=test_options.findIndex(
（obj）=>obj.name==event.target.value
);
常量值=测试选项[选定的分区].div；
console.log（“点击值为”+值）；
///log（测试选项[1].div）；
setState（value）；//更新当前选定值的状态
};
如果（值=“无”）{
返回(
选择一个div
没有一个
{props.options.map（（选项）=>(
{options.div}
))}
);
}否则{
返回{value}；
}
}
返回；
}

谢谢macphilips的帮助。我明白你的意思。那么，我如何让选定的Div在单击时替换下拉列表？创建了一个沙盒来显示如何用选定的Div替换下拉列表我在哪里可以找到这个沙盒？啊，对不起，我以为我添加了链接，谢谢！我非常感激

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>
    }
  ]

  return <Dropdown options={test_options}></Dropdown>
}

function Dropdown(props) {
  const [value, setState] = useState("") // keep track of the current selected dropdown option
  const onOptionChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    const value = event.target.value as string
    setState(value) // update state of the current selected value
  }
  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>
  )
}

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>;
}