在React Creatable Select中删除空对象值的方法

时间:2019-08-19 11:14:16

标签: javascript reactjs

我在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());
    }
  };

谢谢。

0 个答案:

没有答案