如何在 onChange 后清除 Material-ui 中的自动完成输入？

Posted 2023-02-22

【中文标题】如何在 onChange 后清除 Material-ui 中的自动完成输入？

【英文标题】：How to clear the autocomplete's input in Material-ui after an onChange?

【发布时间】：2020-02-25 18:59:26

【问题描述】：

在material UI 的钩子版本中，我似乎无法在 onChange 事件后清除自动完成功能：

// @flow
import React,  useRef, useState  from "react";
import "./Autocomplete.scss";
import AutocompleteUI from "@material-ui/lab/Autocomplete";
import TextField from "@material-ui/core/TextField";

function Autocomplete(props) 
    const  options  = props;
    const [value, setValue] = useState();

    const container = useRef();
    const input = useRef();

    function onChange(event, newValue) 
        if (!newValue) return;
        props.onChange(newValue);
        setValue(undefined);
        input.current.value = "";
        event.target.value = "";
    

    function renderInput(params) 
        return (
            <TextField
                inputRef=input
                ...params
                inputProps=
                    ...params.inputProps,
                    autoComplete: "disabled", // disable autocomplete and autofill
                
                margin="none"
                fullWidth
            />
        );
    

    return (
        <div className="Autocomplete-container">
            value
            <AutocompleteUI
                ref=container
                options=options
                autoHightlight=true
                clearOnEscape=true
                autoSelect=true
                // freeSolo=true
                getOptionLabel=option => option.title
                renderInput=renderInput
                value=value
                onChange=onChange
            />
        </div>
    );


export default Autocomplete;

深入了解source code 我注意到该组件在内部使用useAutocomplete 挂钩。但是，存在于该钩子内部的 setInputValue 和 resetInputValue 都不会暴露在外部。有没有办法在 onChange 之后完成输入清除？

【问题讨论】：

清除自​​动补全是清空输入框，还是删除建议？

@ChrisB。是的，前者，我正在尝试清除输入框。

显然它只适用于 refs，在我看来，这是一个可重用 React 组件的愚蠢设计。您必须直接在 DOM 元素上设置值，但我不熟悉他们的 API。

@ChrisB。我尝试使用 refs 并直接更改输入的值，但是由于组件本身保持状态（通过 useAutocomplete 挂钩）它不起作用

【参考方案1】：

您需要将 inputValue 属性设置为您的 valueState 并且 onhange 函数只需清除 valueState

<Autocomplete

inputValue=valueState

onChange=(value, option) =>



    setOptions([])
    setValueState("")



renderInput=params => (
    <TextField
        dir="rtl"
        onChange=(event) =>
        

            setValueState(event.target.value)

        
        ...params
        label="Search Patient"
        variant="filled"

        InputProps=
            ...params.InputProps,
            endAdornment: (
                <React.Fragment>
                    loading ? (
                        <CircularProgress color="inherit" size=20 />
                    ) : null
                    params.InputProps.endAdornment
                </React.Fragment>
            )
        
    />
)
/>

【参考方案2】：

我遇到了同样的问题，我用这个解决了：

    const [search, setSearch] = useState("");

...

     <Autocomplete
          id="grouped-demo"
          options=tagsList
          getOptionLabel=(option) => option.tag
          onChange=(event, value) =>value ? setSearch(value.tag) : setSearch(event.target.value)
          style=width: 700
          renderInput=(params) => <TextField ...params label="Search" variant="outlined"/>
     />

【参考方案3】：

我在搜索/导航栏中使用自动完成/文本字段时遇到了类似的情况。在 onChange 事件中使用history.push 或其他路由器函数后，该值将始终被留下。诀窍是设置 inputValue = "" 。每次组件渲染时，之前的值都会被移除。见下文

<Autocomplete
  ...defaultProps
  onChange=(event, value) => 
    if(value) 
      router.history.push(`/summary`);
  
  filterOptions=filterOptions
  clearOnEscape=true
  inputValue=""
  renderInput=params => <TextField ...params 
                                    label="Quick Search"  fullWidth                            
                                    InputProps=...params.InputProps, 
                                      'aria-label': 'description',
                                                disableUnderline: true, 
                           />
/>

【讨论】：

好吧，这对我不起作用。它只是使文本字段停止接受任何输入，因为输入文本不会转发到输入元素

【参考方案4】：

哟！我很确定材料中的 Textfield 组件采用“autoComplete”道具，您可以传递字符串“false”。还有，inputProps里没有进去，试试看。

<Textfield autoComplete="false" />

【讨论】：

您可能指的是浏览器的自动完成功能。我的用例需要使用更强大的选项，我可以在其中选择提供的选项。

【参考方案5】：

我遇到了同样的问题，我用这个解决了：

const [value, setValue] = useState(null);

那么你就不需要使用引用了。