Я заметил несколько проблем с вашим кодом, getFieldProps вызывается без параметров id или name, из-за которых страница не загружается. Что еще более важно, вы должны соблюдать следующие правила autocomplete docs при передаче и использовании реквизита для него. Например:
renderInput={(params) => <TextField {...params} label="Controllable" variant="outlined" />}
Я задал несколько вопросов, пожалуйста, дайте мне знать, когда вы сможете получить эти ответы, чтобы я мог решить все вопросы, которые могут возникнуть.
Q1. должен ли пользовательский ввод предоставить соответствующие совпадения из свойства name в ваших предложениях или только по id? например если я наберу "озеро", вы хотите показать BRO1182, Озеро Вермонт ежеквартально 2019 апреля в качестве совпадения?
Q2. как вы хотели устранить ошибку? Я вижу, у вас есть модель ошибки, но вы не знаете, как использовать sh, чтобы использовать ее для стилизации автозаполнения при возникновении ошибки
Q3. мы пропускаем кнопку отправки? Я вижу функцию onSubmit, но она не используется в нашем коде.
Q4. Есть ли конкретная причина, по которой вам нужны состояния открытия и загрузки?
ниже я попытался показать соответствующие совпадения из пользовательского ввода
import React, { FunctionComponent, FormEvent, ChangeEvent } from "react";
import { Grid, TextField, Typography } from "@material-ui/core";
import { CreateProjectModel, JobModel } from "~/Models/Projects";
import ErrorModel from "~/Models/ErrorModel";
import Autocomplete from "@material-ui/lab/Autocomplete";
type CreateProjectFormProps = {
model: CreateProjectModel;
errors: ErrorModel<CreateProjectModel>;
onChange: (changes: Partial<CreateProjectModel>) => void;
onSubmit?: () => Promise<void>;
suggestions: JobModel[];
};
const CreateProjectForm: FunctionComponent<CreateProjectFormProps> = ({
model,
errors,
// mock function for testing
// consider a better name like selectChangeHandler
onChange = val => console.log(val),
// consider a better name like submitJobFormHandler
onSubmit,
suggestions: options = [
{ id: "BR00001", name: "Aircrew - Standby at home base" },
{ id: "BR00695", name: "National Waste" },
{ id: "BR00777B", name: "Airly Monitor Site 2018" },
{ id: "BR00852A", name: "Cracow Mine" },
{ id: "BR00972", name: "Toowoomba Updated" },
{ id: "BR01023A", name: "TMRGT Mackay Bee Creek" },
{ id: "BR01081", name: "Newman Pilot Job (WA)" },
{ id: "BR01147", name: "Lake Vermont Monthly 2019" },
{ id: "BR01158", name: "Callide Mine Monthly Survey 2019" },
{ id: "BR01182", name: "Lake Vermont Quarterly 2019 April" }
]
}) => {
const [value, setValue] = React.useState<JobModel>({});
const loading = open && options.length === 0;
// this pc of code is not used, why?
const submit = async (event: FormEvent) => {
event.preventDefault();
event.stopPropagation();
await onSubmit();
};
const handleChange = (_: any, value: JobModel | null) => {
setValue(value);
onChange({
[value.name]: value.id
});
};
// consider passing in props instead
const getFieldProps = (id: string, label: string) => {
return {
id,
label,
// not sure what this is
helperText: errors[id],
// not sure what this is
error: Boolean(errors[id]),
value: model[id],
onChange: change(id)
};
};
return (
<Autocomplete
id="placeholder-autocomplete-input-id"
// for selection, use value see docs for more detail
value={value}
onChange={handleChange}
getOptionSelected={(option, value) => option.id === value.id}
getOptionLabel={option => option.id}
options={options}
loading={loading}
autoComplete
includeInputInList
renderInput={params => (
// spreading the params here will transfer native input attributes from autocomplete
<TextField
{...params}
label="placeholder"
required
fullWidth
autoFocus
margin="normal"
/>
)}
renderOption={option => (
<Grid container alignItems="center">
<Grid item xs>
<span key={option}>{option.id}</span>
<Typography variant="body2" color="textSecondary">
{option.name}
</Typography>
</Grid>
</Grid>
)}
/>
);
};
export default CreateProjectForm;
и Вы можете увидеть код, запущенный в моей папке «коды», нажав кнопку ниже
