Material UI 自动补全空字符串的默认值

Question

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

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

当前行为😯

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

预期行为🤔

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

重现步骤🕹

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

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

Answer 1

您可以使用

null

作为初始状态，这可能会实现您正在尝试的

 value={data.value || null}

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

Answer 2

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

1. 第17行，

   getOptionSelected

   内部，当值为空字符串时必须返回true；这样 React 选择一个选项，警告就会消失。
2. 第14行，修改

   getOptionLabel

   ，处理空字符串的情况。我会做以下事情：

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

因此，如果选项有标题，它会返回一个标题，否则它会返回一个可视化的空字符串。

3. 最后修改

   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"
        />
      )}
    />
  );
}

Answer 3

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

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

Answer 4

  <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')}
                           />
                        )}
                    />

Answer 5

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

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

Answer 6

从“react”导入 * as React； 从“@mui/material”导入{自动完成、按钮、文本字段}；

const 选项 = ["alpha", "beta", "gamma", "delta", "epsilon"];

const Demo = () => {
  

    const [value, setValue] = React.useState(null);
      const handleReset = () => {
        setValue(null);
      };
      const handleChange = (event, value) => {
        setValue(value);
      };
      return (
        <>
          <Autocomplete
            id="combo-box-demo"
            freeSolo
            value={value}
            options={options}
            sx={{ width: 300 }}
            onChange={handleChange}
            renderInput={(params) => (
              <TextField {...params} label="Select an option..." />
            )}
          />
          <Button onClick={handleReset}>Reset</Button>
          <div>The current value is: {value}</div>
        </>
      );

};
export default Demo;

如果您有多个自动完成功能并且想要重置，您可以另外执行此操作，传递 value={value || []}。重置后，你的值将为空