Material UI Autocomplete 空字符串的默认值

Posted 2023-03-05

【中文标题】Material UI Autocomplete 空字符串的默认值

【英文标题】：Material UI Autocomplete default value of empty string

【发布时间】：2020-07-27 20:35:44

【问题描述】：

将空字符串传递给自动完成时，它会引发控制台警告，指出该值无效。

如何让这个警告消失？它不会引起任何问题，但是每次重新渲染时都将它扔到控制台中是非常烦人的。我似乎让它不会发生的唯一方法是将字段的初始值设置为 null，据我了解，这不是我应该将其作为输入的默认值。

当前行为????

将空字符串的默认值传递给自动完成组件时，它会抛出一个控制台警告该值空字符串无效。

预期行为????

如果给自动完成的值是一个空字符串，应该不会抛出警告或错误。

复制步骤？？？？

这里是展示错误的链接：https://codesandbox.io/s/material-demo-n0ijt

1) 将一个空字符串传递给 Autocomplete 组件的 value 属性。

【问题讨论】：

请更新您的问题并删除所有不相关的内容。这是material-ui github页面的issue模板的复制粘贴。请不要在 *** 中使用它。

似乎是展示我所做的事情以及我遇到的问题的好方法。

如前所述——只保留相关数据（结构不相关，环境不相关等...）

【参考方案1】：

您可以使用null 作为初始状态，这可能会实现您的目标

value=data.value || null

如果您将其设置为未定义，它会抱怨受控组件，这样即使在使用自动完成后我也不会收到错误

【讨论】：

当我做value=val 时，做const val = [val, setVal] = useState(null); 效果很好

【参考方案2】：

我解决了它处理输入字符串为空的情况（你没有这样做）。沙盒中需要 3 样东西：

第17行，getOptionSelected内，当值为空字符串时必须返回true；这样 React 选择了一个选项，警告就消失了。 第14行，修改getOptionLabel，处理空字符串的情况。我会做以下事情：

getOptionLabel=option => option.title ? option.title : ''

所以如果选项有标题，则返回标题，否则返回可视化的空字符串。

最后修改onChange处理空字符串，这样

onChange=(e, selectedObject) => 
    if (selectedObject !== null)
        setValue(selectedObject)

总体：

import React from "react";
import TextField from "@material-ui/core/TextField";
import Autocomplete from "@material-ui/lab/Autocomplete";

export default function FreeSoloCreateOption() 
  const [value, setValue] = React.useState("");

  return (
    <Autocomplete
      value=value
      id="empty-string-demo"
      options=top100Films
      getOptionLabel=option => option.title ? option.title : ''
      getOptionSelected=(option, value) => 
        //nothing that is put in here will cause the warning to go away
        if (value === "") 
          return true;
         else if (value === option) 
          return true;
        
      
      onChange=(e, selectedObject) => 
        if (selectedObject !== null)
            setValue(selectedObject)
      
      renderOption=option => option.title
      style= width: 300 
      renderInput=params => (
        <TextField
          ...params
          label="Default Value of Empty String"
          variant="outlined"
        />
      )
    />
  );

【讨论】：

谢谢！就我而言，只是标签格式化程序导致了问题。将其更新为getOptionLabel=(option) => (option && option.label)? option.label: ""

这就是我的工作：getOptionLabel=option => option?.title || ''getOptionSelected=(option, value) => value === '' || option.id === value.id

我已经尝试了上述解决方案。组件初始化时，下拉菜单中的所有选项都处于选定模式。我可以解决这个问题吗？

【参考方案3】：

一个简单的改变是过滤掉初始重置

onChange=(event, newValue, reason) => 
    if (reason === 'reset' && newValue === '') 
        // Do nothing
    
    else 
        setValue(newValue);
    

【参考方案4】：

将此添加到您的自动完成...

getOptionSelected=(option, value) => 
    // Accept empty string
    if(value === "" || value === option)  return true; 

【参考方案5】：

  <Autocomplete className=styles['vacation-list-status']
                        id="vacation-list-status"
                        options=vacationStatus
                        getOptionLabel=option => option.label
                        onChange=(event, newValue) => 
                          handleVacationStatus( 
                              newValue ? newValue.value : null
                          );
                        
                        renderInput=(params) => (
                           <TextField
                            ...params
                            variant="outlined"
                            label=t('status')
                           />
                        )
                    />