如何使用自定义钩子在 MUI v5 中处理 AutoComplete onChange

Posted 2023-02-22

【中文标题】如何使用自定义钩子在 MUI v5 中处理 AutoComplete onChange

【英文标题】：How to handle AutoComplete onChange in MUI v5 using a custom hook如何使用自定义钩子在 MUI v5 中处理 AutoComplete onChange

【发布时间】：2022-01-10 20:13:59

【问题描述】：

我正在使用一个自定义挂钩来验证和处理 onChange 函数。

我在处理大多数组件（输入、选择、文本字段）的 onChange 时没有问题；我正在使用以下语法来处理 onChange，除了 AutoComplete 之外，它工作正常。

无自动完成组件：

onChange = handleInputChange

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

我们看一下e.target

但是当它与自动完成功能相比时，它看起来与上面的屏幕截图完全不同。我无法通过 setValues 获取名称或值以正确跟踪它。

【参考方案1】：

我使用了一个函数道具：

const onChange = props;   

<Autocomplete
    onChange=(e, value) => 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 && 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>
                        ),
                    
                />
            )
        />
    );

【讨论】：

谢谢，您如何更改我的 handleInputChange 以使用您的解决方案。从你设置的组件 onChange=handleInputChange 你怎么能从那里处理道具？

我猜你需要使用 Formik 或类似的东西从 Input 或 textaread 等中获取一个带有其名称的值...

如果您在沙盒中编写代码，可能会对其他人有所帮助