英文:
How to get and set Autocomplete Multiple values?
问题
我按照这个指南创建了一个文本框。
但我无法获得此字段的值。
有什么建议吗？
https://mui.com/material-ui/react-autocomplete/#multiple-values
const categories = [
{id:1, name: "blog"},
{id:2, name: "music"},
{id:3, name: "video"},
]
const [category, setCategory]: any = useState([]);
<Autocomplete
multiple
limitTags={1}
value={category}
onChange={(event, newValue) => {
setCategory([
...category,
newValue
]);
}}
id="category-filter"
options={categories}
getOptionLabel={(option) => option.name}
renderInput={(params) => (
<TextField {...params} label="Category" placeholder="categories" />
)}
/>
英文:
I following this guild made a textfield.
But i can not got this field value,
Any suggestions?
https://mui.com/material-ui/react-autocomplete/#multiple-values
const categories = [
{id:1, name: "blog"},
{id:2, name: "music"},
{id:3, name: "video"},
]
const [category, setCategory]: any = useState([]);
<Autocomplete
multiple
limitTags={1}
value={category}
onChange={(event, newValue) => {
setCategory([
...category,
newValue
]);
}}
id="category-filter"
options={categories}
getOptionLabel={(option) => option.name}
renderInput={(params) => (
<TextField {...params} label="Category" placeholder="categories" />
)}
/>
答案1
得分: 1
The newValue 在 onChange 处理程序中已经是选定选项的数组，所以您可以简单地将其设置到 category 中。另外，由于每个选项都是一个对象，您必须添加 isOptionEqualToValue 属性，以告诉组件如何比较选项与所选值。 代码如下：
import { useState } from "react";
import { Autocomplete, TextField } from "@mui/material";
export const Test = () => {
const categories = [
{ id: 1, name: "blog" },
{ id: 2, name: "music" },
{ id: 3, name: "video" }
];
const [category, setCategory] = useState([]);
return (
<Autocomplete
multiple
limitTags={1}
value={category}
onChange={(event, newValue) => {
setCategory(newValue);
}}
id="category-filter"
options={categories}
getOptionLabel={(option) => option.name}
isOptionEqualToValue={(option, value) => option.id === value.id}
renderInput={(params) => (
<TextField {...params} label="Category" placeholder="categories" />
)}
/>
);
};
英文:
The newValue in onChange handler is already an array of selected options, so you can just set it into the category simply.
Also since each option is an object, you have to add isOptionEqualToValue attribute to tell the component how to compare the option to the selected value. The code is as follows:
import { useState } from "react";
import { Autocomplete, TextField } from "@mui/material";
export const Test = () => {
const categories = [
{ id: 1, name: "blog" },
{ id: 2, name: "music" },
{ id: 3, name: "video" }
];
const [category, setCategory] = useState([]);
return (
<Autocomplete
multiple
limitTags={1}
value={category}
onChange={(event, newValue) => {
setCategory(newValue);
}}
id="category-filter"
options={categories}
getOptionLabel={(option) => option.name}
isOptionEqualToValue={(option, value) => option.id === value.id}
renderInput={(params) => (
<TextField {...params} label="Category" placeholder="categories" />
)}
/>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论