Material ui自动完成组件工作正常,但我希望 object.id
作为 onSelect
事件值( event.target.value
),而不是 object.name
. 换句话说,我想展示 object.name
作为“选择项目标签”,但我希望 object.id
作为 onSelect
事件值( event.target.value
). 现在,我的 event.target.value
与“选择项标签”相同( object.name
). 以下是一个示例(来自material ui文档):
这个 options
对象是这样的:
const options = [
{ id: "01", name: "Peter" },
{ id: "02", name: "Mary },
{ id: "03", name: "John" }
]
自动完成与材质ui文档中的相同:
<Autocomplete
id="asynchronous-demo"
fullWidth
open={open}
onOpen={() => {
setOpen(true)
}}
onClose={() => {
setOpen(false)
}}
getOptionLabel={(option) => option.name}
options={options}
loading={loading}
renderInput={(params) => (
<TextField
{...params}
label="Asynchronous"
variant="outlined"
onChange={(event) => {
if (event.target.value !== '' || event.target.value !== null) {
onChangeHandle(event.target.value)
}
}}
onSelect={(event) => {
onSelectHandle(event)
}}
InputProps={{
...params.InputProps,
endAdornment: (
<React.Fragment>
{loading ? (
<CircularProgress color="inherit" size={20} />
) : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
具有 onSelect
我总是很紧张 object.name
作为 event.target.value
,但我想回去 object.id
作为 event.target.value
.
有人知道怎么做吗??
1条答案
按热度按时间kuhbmx9i1#
您当前从textfield的onselect获取值,而不是autocomplete的onchange。
有关更多信息,请查看自动完成文档中的可控状态部分。