我在react中的可创建选择中遇到错误,其中当文本框的当前值为null时,我添加新值,它将生成空白选择。
T1-当前值=空对象,添加条目“ 1234”
T2-当前值='1234',删除条目'1234'
T3-当前值=空,添加条目'234'=创建2个选择:空条目和234条目。
代码如下:
const createOption = (label) => ({
label,
value: label,
});
const propTypes = {
initialValues: PropTypes.array,
onSearch: PropTypes.func,
debug: PropTypes.bool
};
const removeDuplicates = (myArr, prop) => {
return myArr.filter((obj, pos, arr) => {
return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos;
});
}
const [inputValue, setInputValue] = useState('');
const [values, setValues] = useState(initialValues);
const handleBlur = (event) => {
if(!inputValue || !inputValue.trim()) {
return;
}
if (values === null) {
setValues(createOption(inputValue));
} else
setValues(removeDuplicates([...values, createOption(inputValue)], "value"));
setInputValue("");
};
const handleValueChange = (val, actionMeta) => {
setValues(val);
};
const handleInputValueChange = (inputValue) => {
if(!inputValue) {
return;
}
const re = /^[\d,\s]+$/;
if (re.test(inputValue)) {
setInputValue(inputValue.trim());
}
};
谢谢。