[英]Selected option not showing in Material UI select field box
I have created a select component using Mui but whenever I click on any option from the select dropdown then it's storing correctly in the state that I have defined but it's not displaying in the select box.我使用 Mui 创建了一个 select 组件,但每当我单击 select 下拉列表中的任何选项时,它都会正确存储在我定义的 state 中,但它不会显示在 select 框中。
Here is my JSON object:这是我的 JSON object:
const SampleData = [
{
"type": "button",
"display": "RELEASE",
"key": "key1",
"value": [
{
"type": "text",
"display": "Are you sure to reject this",
"key": "key2",
"value": "val10"
},
{
"type": "select",
"display": "select reason",
"key": "key3",
"value": [
{ "type": "option",
"display":
"Wrong Truck number entered",
"key": "key4",
"value": "val1"
},
{ "type": "option",
"display": "Floors having intrusions",
"key": "key5",
"value": "val1"
}]
}
]
}]
And my component SelectField.js :我的组件SelectField.js :
const SelectField = ({ SampleData }) => {
const [selectValue, setSelectValue] = useState('');
const [selectfieldres, setSelectFieldRes] = useState([]);
useEffect(() => {
SampleData.map((item, index) => {
if (item.type === 'select') {
if (typeof item.value === "object") {
setSelectFieldRes(item.value)
}
}
})
}, [])
const onChangeHandler = (e, display) => {
const selectedText = e.target.innerText;
console.log(selectedText)
selectfieldres.map((item, index) => {
if(item.display !== selectedText){
localStorage.removeItem('select' + item.display)
}
}
)
if (selectedText) {
setSelectValue({selectValue: selectedText})
console.log(localStorage.getItem.name)
localStorage.setItem('select' + selectedText, selectedText)
}
}
return (
<Box>
<FormControl sx={{ml: 5, my: 2, minWidth: 180 }}>
<InputLabel id="demo-simple-select-label">select reason</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={selectValue}
label="select reason"
onClick={(e)=>{onChangeHandler(e,display)}}
>
{selectfieldres.map((item, index) => (
item.type === 'option' &&
<MenuItem value={item.display} key={index}>
{item.display}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
export default SelectField;
Output of above component:以上组件的Output:
Options are showing in the dropdown选项显示在下拉列表中
When I click on any option then it's showing empty当我点击任何选项时,它显示为空
By the looks, you are not setting the state
for selectValue
properly.从外观上看,您没有为
selectValue
正确设置state
。
const [selectValue, setSelectValue] = useState('');
This means the selectValue
is of type string
.这意味着
selectValue
的类型为string
。 However, in the state update, you are trying to change an object property.但是,在 state 更新中,您正在尝试更改 object 属性。
setSelectValue({selectValue: selectedText});
You need to simply pass a string to the setState
method.您只需将一个字符串传递给
setState
方法即可。
setSelectValue(selectedText);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.