[英]How to handle AutoComplete {onChange} in MUI v5 using a custom hook
I am using a custom hook that validates and handles the onChange function.我正在使用一个自定义挂钩来验证和处理 onChange function。
I have no issue handling the onChange for most of the Components (input, Select, TextField);对于大多数组件(输入,Select,TextField),我处理 onChange 没有问题; I am using the following syntax to handle onChange Which is working fine except for AutoComplete.
我正在使用以下语法来处理 onChange,除了 AutoComplete 之外,它工作正常。
None AutoComplete Components:无自动完成组件:
onChange = {handleInputChange}
const handleInputChange = (e) => {
const { name, value } = e.target;
setValues({
...values,
[name]: value,
});
if (validateOnChange) validate({ [name]: value });
};
Let's look at the e.target让我们看看 e.target
But when it's compared to the AutoComplete it looks nothing like the above screenshot.但是当它与 AutoComplete 相比时,它看起来与上面的屏幕截图完全不同。 I am not able to get the name or the value to keep track of it correctly via setValues.
我无法通过 setValues 获取名称或值以正确跟踪它。
I used a function props:我使用了 function 道具:
const {onChange} = props;
<Autocomplete
onChange={(e, value) => onChange(value)}
if you want to see it completely:如果你想完整地看到它:
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 && options.length === 0;
let timeOut = useRef(null);
const getData = async (search = "") => {
setLoadingApi(true)
const data = await getListData(search); // For demo purposes.
// console.log(data)
setLoadingApi(false);
// console.log(data)
if(data)
setOptions([...data]);
}
React.useEffect(() => {
if (!loading) {
return undefined;
}
getData();
}, [loading]);
React.useEffect(() => {
if (filters !== null) {
if (timeOut.current !== null)
clearTimeout(timeOut.current);
timeOut.current = setTimeout(() => getData(filters), 500);
}
}, [filters]);
React.useEffect(() => {
if (!open) {
setOptions([]);
}
}, [open]);
return (
<Autocomplete
disabled={disabled}
id={name}
name={name}
sx={{width: "100%"}}
open={open}
onOpen={() => {
setOpen(true);
}}
onClose={() => {
setOpen(false);
}}
defaultValue={defaultValue}
value={value}
isOptionEqualToValue={(option, value) => option?.[id] === value?.[id]}
getOptionLabel={(option) => option?.[label]}
options={options}
onChange={(e, value) => onChange(value)}
loading={loadingApi}
noOptionsText={noOption}
renderInput={(params) => (
<TextField variant="standard"
name={name}
required={required}
variant="standard"
{...params}
label={showName}
onChange={(e) => setFilters(e.target.value)}
InputProps={{
...params.InputProps,
onblur:() => {},
endAdornment: (
<React.Fragment>
{loadingApi ? <CircularProgress color="inherit" size={20}/> : null}
{params.InputProps.endAdornment}
</React.Fragment>
),
}}
/>
)}
/>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.