使用 material-ui 自动完成获取所选值的 "ID"
Get the "ID" of the selected value with material-ui autocomplete
我正在使用 material-ui 的自动完成组件。
搜索栏中“customerList”中的数据没有问题。但是我无法获取我选择的数据的“ID”号。我想获取选中数据的ID号
另外,出现如下错误。我该如何解决这个问题?
enter image description here
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 参数 returns 一个对象。
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
return 都不是来自 options
的对象,只有标签。没有 freeSolo
也行。
我通过我的选择来找到匹配的那个。然后我 return 使用 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'}/>)
}
我正在使用 material-ui 的自动完成组件。
搜索栏中“customerList”中的数据没有问题。但是我无法获取我选择的数据的“ID”号。我想获取选中数据的ID号
另外,出现如下错误。我该如何解决这个问题?
enter image description here
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 参数 returns 一个对象。
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
return 都不是来自 options
的对象,只有标签。没有 freeSolo
也行。
我通过我的选择来找到匹配的那个。然后我 return 使用 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'}/>)
}