Material UI 空字符串的自动完成默认值

Question

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

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

当前行为

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

预期行为

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

重现步骤

这是一个 link 来展示错误：https://codesandbox.io/s/material-demo-n0ijt

1) 将空字符串传递给自动完成组件的值属性。

Answer 1

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

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

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

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

最后修改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 2

您可以使用 null 作为初始状态，这可能会实现您正在尝试的效果

value={data.value || null}

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

Answer 3

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

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

Answer 4

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

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

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

Material UI 空字符串的自动完成默认值

Material UI Autocomplete default value of empty string

reactjs

autocomplete

material-ui

当前行为

预期行为

重现步骤