选择时，材质UI选择替换为selectedValue

Question

您好。

我正在React中使用一些Material UI组件编写一段代码。我当前有一个带有MenuItem子项的Select组件。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>
),
},
]; 

这是下拉/选择组件：

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

Answer 1

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

Answer 2

查看您的代码片段，您似乎没有关注下拉/选择组件中所选选项的变化，也没有告诉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>
)
}