Material-ui 自动完成清除值答案

【问题标题】：Material-ui autocomplete clear valueMaterial-ui 自动完成清除值
【发布时间】：2020-05-04 13:18:03
【问题描述】：

我的反应代码有一个问题。

我使用 Material-ui 和 redux-form。我有选择输入，更改此选择后，我应该重置 .我使用 react-form 中的“更改”操作并为文本字段设置值。但是标签仍然存在。我可以清除或重置值吗？

<Autocomplete
    options={list}
    getOptionLabel={option => option.name}
    onInputChange={onChange}
    onChange={onChangeAutoComplete}
    noOptionsText='Нет доступных вариантов'
    loadingText='Загрузка...'
    openText='Открыть'
    renderInput={params => (
        <Field
            {...params}
            label={label}
            name={fieldName}
            variant="outlined"
            fullWidth
            component={renderTextField}
            className={classes.textField}
            margin="normal"
        />
    )}
/>

【问题讨论】：

看起来可能是一个错误：github.com/mui-org/material-ui/issues/20939

标签： reactjs material-ui redux-form

【解决方案1】：

在 value 属性上使用钩子会破坏自动完成组件的功能（至少对我而言）。使用类，和设置本地状态是一样的。

幸运的是它是一个反应组件，所以它有一个“关键”道具。当 key prop 发生变化时，组件会使用默认值重新渲染（这是一个空数组，因为没有选择任何内容）。每当需要重置时，我在父组件中使用钩子并将值传递给 key prop。

<Autocomplete
    key={somethingMeaningful} // Bool, or whatever just change it to re-render the component
//...other props
/>

希望这会有所帮助！

【讨论】：

@RaizalI.N.Pregnanta 你把钥匙改成什么了？
@theSekyi 每次我需要清除自动完成时，我都会随机更改密钥。我正在使用 momentJs.toStringISO() ?
@Milan Neninger 非常感谢它工作得很好
如果您设置了默认值，则不清楚。它会重置为默认值。我需要清除！
你也可以使用 lodash/uniqueId 中的 uuid

【解决方案2】：

在您的<Autocomplete /> 中使用value，如下所示：

<Autocomplete
    value={this.state.value} //insert your state key here
//...other props
/>

然后清除该键的状态，以清除自动完成字段值

【讨论】：

所以 onInputChange={onChange} onChange={onChangeAutoComplete} 更新你的 redux 存储，并返回一个你映射到 prop 的状态，不是吗？在 Autocomplete 的值中使用该道具仍然不起作用？
嗯，你确定 currVal 是正确的值吗？尝试 console.log()
是的，我试过了。当我更改第一次选择此值更改并等于''。并在我写自动完成时发生了变化，在这种情况下等于我写的。
这对我不起作用，我也必须设置密钥

【解决方案3】：

材料 UI 自动完成 onInputChange 回调提供 reason 参数。如果输入已被输入更改，则原因将为input，如果您选择选项，则原因将为reset。

onInputChange={(event, newInputValue, reason) => {
    if (reason === 'reset') {
      setValue('')
      return
    } else {
      setValue(newInputValue)
    }
  }}

setValue 是 useState，您可以将值状态传递给自动完成 value 属性。

【讨论】：

【解决方案4】：

我通过更新多个属性为假的 inputValue 属性来实现这一点。如果您使用多个道具，则存在一个问题（错误）。选定的值不会被删除。

【讨论】：

【解决方案5】：

为了解决这个问题，我创建了一个挂钩来监视自动完成的value 状态，并在checkClear 返回true 时设置输入值；

function useAutocompleteInputClear(watch, checkClear) {
    const elmRef = useRef(null);
    useMemo(() => {
            if (!elmRef || !elmRef.current) return;

            if (!checkClear || typeof checkClear !== "function") return;

            const button = elmRef.current.querySelector("button")
            if (checkClear(watch) && button) {
                button.click();
            }

    }, [watch])

    return elmRef;
}

它的第一个参数是应该被监视的值，它的第二个参数是一个返回布尔值的函数。如果是true，就会发生清算。另外，钩子返回一个ref，它需要作为ref prop 传递给Autocomplete。

const elmRef = useAutocompleteInputClear(value, v => !v || !v.id)

<Autocomplete ref={elmRef} 
              value={value}
...

【讨论】：

【解决方案6】：

我将发布一个非常肮脏的方法来清除自动完成的值。仅在其他方法无效时尝试；

import React, { useRef } from 'react';
...
const autoC = useRef(null);
...
<Autocomplete
  ...
  ref={autoC}
/>

然后当你想清除值时；

const ele = autoC.current.getElementsByClassName('MuiAutocomplete-clearIndicator')[0];
if (ele) ele.click();

【讨论】：

【解决方案7】：

一种简单的方法是将这些道具传递给自动完成，如下所示：

onChange={handleSkillChange}
inputValue=''
clearOnBlur={true}

onChange 是一个事件处理程序，它将值存储在状态中。
inputValue='' 有助于确保自动完成中的文本字段始终为空
clearOnBlue={true} 有助于在失去焦点时清除自动完成组件的值。

【讨论】：