Блог

Я использую пользовательский хук, который проверяет и обрабатывает функцию onChange.

У меня нет проблем с обработкой onChange для большинства компонентов (ввод, выбор, текстовое поле); Я использую следующий синтаксис для обработки onChange, который работает нормально, за исключением автозаполнения.

Нет компонентов автозаполнения:

 onChange = {handleInputChange}  const handleInputChange = (e) =gt; {  const { name, value } = e.target;  setValues({  ...values,  [name]: value,  });  if (validateOnChange) validate({ [name]: value });  };  

Давайте посмотрим на цель e.

Но когда его сравнивают с автозаполнением, он совсем не похож на приведенный выше снимок экрана. Я не могу получить имя или значение, чтобы правильно отслеживать его с помощью заданных значений.

Я использовал реквизит функции :

 const {onChange} = props;   lt;Autocomplete  onChange={(e, value) =gt; onChange(value)}  

если вы хотите увидеть это полностью :

 import * as React from 'react'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; import CircularProgress from '@mui/material/CircularProgress'; import {useRef} from "react";  export default function Asynchronous(props) {  const {onChange, name, getListData, label = "name", id = "id", showName,defaultValue,disabled,required,value,noOption="No Option"} = props;  const [open, setOpen] = React.useState(false);  const [options, setOptions] = React.useState([]);  const [filters, setFilters] = React.useState(null);  const [loadingApi, setLoadingApi] = React.useState(false)  const loading = open amp;amp; options.length === 0;  let timeOut = useRef(null);   const getData = async (search = "") =gt; {  setLoadingApi(true)  const data = await getListData(search); // For demo purposes.  // console.log(data)  setLoadingApi(false);  // console.log(data)  if(data)  setOptions([...data]);  }   React.useEffect(() =gt; {   if (!loading) {  return undefined;  }  getData();   }, [loading]);   React.useEffect(() =gt; {  if (filters !== null) {  if (timeOut.current !== null)  clearTimeout(timeOut.current);   timeOut.current = setTimeout(() =gt; getData(filters), 500);  }  }, [filters]);   React.useEffect(() =gt; {  if (!open) {  setOptions([]);  }  }, [open]);   return (  lt;Autocomplete  disabled={disabled}  id={name}  name={name}  sx={{width: "100%"}}  open={open}  onOpen={() =gt; {  setOpen(true);  }}  onClose={() =gt; {  setOpen(false);  }}  defaultValue={defaultValue}  value={value}  isOptionEqualToValue={(option, value) =gt; option?.[id] === value?.[id]}  getOptionLabel={(option) =gt; option?.[label]}  options={options}  onChange={(e, value) =gt; onChange(value)}  loading={loadingApi}  noOptionsText={noOption}  renderInput={(params) =gt; (  lt;TextField variant="standard"  name={name}  required={required}  variant="standard"  {...params}  label={showName}  onChange={(e) =gt; setFilters(e.target.value)}  InputProps={{  ...params.InputProps,  onblur:() =gt; {},  endAdornment: (  lt;React.Fragmentgt;  {loadingApi ? lt;CircularProgress color="inherit" size={20}/gt; : null}  {params.InputProps.endAdornment}  lt;/React.Fragmentgt;  ),  }}  /gt;  )}  /gt;  ); }