[英]Get the "ID" of the selected value with material-ui autocomplete
我将自动完成组件与 material-ui 一起使用。
搜索栏“customerList”中的数据没有问题。 但我无法获得我选择的数据的“ID”号。 我想获取所选数据的 ID 号。
此外,还会出现如下错误。 我怎样才能解决这个问题?
import Autocomplete from '@material-ui/lab/Autocomplete';
class AppointmentFormContainerBasic extends React.PureComponent {
constructor(props) {
super(props);
}
render() {
const textEditorProps = (field) => ({
variant: 'outlined',
onChange: ({ target: change }) => this.changeAppointment({
field: [field], changes: change.value
}),
value: displayAppointmentData[field] || '',
className: classes.textField
});
const customerList = [
{id: "1", customerName: 'John', customerSurname: "test0"},
{id: "2", customerName: 'Bob', customerSurname: "test1"},
{id: "3", customerNametle: 'steve', customerSurname: "test2"},
{id: "4", customerName: 'steve', customerSurname: "test3"},
{id: "4", customerName: 'natalia', customerSurname: "test4"}
];
return (
<AppointmentForm.Overlay
visible={visible}
target={target}
fullSize
onHide={onHide}>
<div>
<div className={classes.content}>
<div className={classes.wrapper}>
<Create className={classes.icon} color="action" />
<Autocomplete
id="free-solo-demo"
freeSolo
options={customerList.map( (option) => {
if (top100Films.customerName === undefined) {
console.log("undefined")
} else {
console.log("option.customerName")
}
return option.customerName + " " + option.customerSurname;
})}
defaultValue={displayAppointmentData['customerName']}
onInputChange={(event, newInputValue) => {
this.changeAppointment({
field: ['customerName'], changes: newInputValue,
value: displayAppointmentData[newInputValue] || '',
});
}}
/>
</div>
</div>
</AppointmentForm.Overlay>
);
}
}
编辑从以下示例中可以看出,onChange 方法的 newValue 参数返回 object。
import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";
export default function ComboBox() {
return (
<Autocomplete
id="combo-box-demo"
options={top100Films}
getOptionLabel={option => option.title}
style={{ width: 300 }}
renderInput={params => (
<TextField {...params} label="Combo box" variant="outlined" />
)}
onChange={(event, newValue) => {
console.log(JSON.stringify(newValue, null, ' '));
}}
/>
);
}
const top100Films = [
{ id: 0, title: "The Shawshank Redemption", year: 1994 },
{ id: 1, title: "The Godfather", year: 1972 },
{ id: 2, title: "The Godfather: Part II", year: 1974 },
{ id: 3, title: "The Dark Knight", year: 2008 },
{ id: 4, title: "12 Angry Men", year: 1957 }
];
在使用freeSolo
和Autocomplete
从对象中进行选择时,我遇到了同样的问题。 onChange
和onInputChange
都不从options
返回 object,只返回 label。 没有freeSolo
就可以了。
我求助于通过我的选项来找到匹配的选项。 然后我使用 SourceSelect 将其返回给组件。 它不漂亮,但它有效。 这是我的代码,它是 TypeScript,但“解决方案”也适用于 JavaScript。
import React, {ChangeEvent} from "react";
import {Autocomplete} from "@material-ui/lab";
import {TextField} from "@material-ui/core";
type SourceSelectParams =
{
updateSource:(source:Source)=> void
sourceOptions:Source[]
preSelected:Source
}
export default function SourceSelect(props:SourceSelectParams){
function optionForLabel(label:string):Source{
let toReturn = props.sourceOptions.find(
(source:Source)=>{ return source.name === label}
)
if(toReturn){
return toReturn
}
return {name:label}
}
function update(event:ChangeEvent<{}>, value:Source|string|null) {
if(value === null){
return
}else if( typeof value === 'string'){
props.updateSource(optionForLabel(value))
}else{
props.updateSource( value)
}
}
return(<Autocomplete options={props.sourceOptions}
value={props.preSelected}
getOptionLabel={(option) => option.name}
onInputChange={update}
onChange={update}
renderInput={
(params) => <TextField {...params}
label="Source"
variant="outlined"
/>}
freeSolo
autoSelect
id={'source'}/>)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.