Material UI 空字符串的自动完成默认值
Material UI Autocomplete default value of empty string
将空字符串传递给自动完成时,它会抛出一个控制台警告,指出该值无效。
如何让此警告消失?它不会引起任何问题,但是每次重新渲染时都将其抛出到控制台中非常烦人。我似乎让它不会发生的唯一方法是将字段的初始值设置为 null,据我所知,这不是我应该将其作为输入的默认值。
当前行为
将空字符串的默认值传递给自动完成组件时,它会抛出一个控制台警告,指出值空字符串无效。
预期行为
如果提供给自动完成的值是空字符串,则不应抛出警告或错误。
重现步骤
这是一个 link 来展示错误:https://codesandbox.io/s/material-demo-n0ijt
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"
/>
)}
/>
);
}
您可以使用 null
作为初始状态,这可能会实现您正在尝试的效果
value={data.value || null}
如果你将它设置为未定义,它会抱怨受控组件,这样我即使在使用自动完成后也不会收到错误
一个简单的更改是过滤掉初始重置
onChange={(event, newValue, reason) => {
if (reason === 'reset' && newValue === '') {
// Do nothing
}
else {
setValue(newValue);
}
}}
将此添加到您的自动完成...
getOptionSelected={(option, value) => {
// Accept empty string
if(value === "" || value === option) { return true; }
}}
<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')}
/>
)}
/>
将空字符串传递给自动完成时,它会抛出一个控制台警告,指出该值无效。
如何让此警告消失?它不会引起任何问题,但是每次重新渲染时都将其抛出到控制台中非常烦人。我似乎让它不会发生的唯一方法是将字段的初始值设置为 null,据我所知,这不是我应该将其作为输入的默认值。
当前行为
将空字符串的默认值传递给自动完成组件时,它会抛出一个控制台警告,指出值空字符串无效。
预期行为
如果提供给自动完成的值是空字符串,则不应抛出警告或错误。
重现步骤
这是一个 link 来展示错误:https://codesandbox.io/s/material-demo-n0ijt
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"
/>
)}
/>
);
}
您可以使用 null
作为初始状态,这可能会实现您正在尝试的效果
value={data.value || null}
如果你将它设置为未定义,它会抱怨受控组件,这样我即使在使用自动完成后也不会收到错误
一个简单的更改是过滤掉初始重置
onChange={(event, newValue, reason) => {
if (reason === 'reset' && newValue === '') {
// Do nothing
}
else {
setValue(newValue);
}
}}
将此添加到您的自动完成...
getOptionSelected={(option, value) => {
// Accept empty string
if(value === "" || value === option) { return true; }
}}
<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')}
/>
)}
/>