1

在我的反应应用程序中，我有一个标记栏。maxTags 属性取决于用户输入。我目前有：

import React, { useRef, useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import Tags from "@yaireo/tagify/dist/react.tagify";
import './SearchBar.css';
...some more  consts and such 

export function SearchBar() {
  const [booru, setBooru] = useState(DEF_BOORU);
  const createBaseTagSettings = (maxTags: number) => {
    return {
      maxTags: maxTags,
      placeholder: "type something",
    }
  }

  const [baseTagifySettings, setbaseTagifySetting] = useState(createBaseTagSettings(booruTagLimit[DEF_BOORU]));

  const tagifyRef: any = useRef();
  const addCallBack = (e: any) => {
    baseTagifySettings.placeholder = "";
  }

  const tagifyCallbacks = {
    add: addCallBack
  }

  const settings = {
    ...baseTagifySettings,
    callbacks: tagifyCallbacks
  }
      
  const onBooruChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    const booru = e.target.value;
    if (BOORUS.indexOf(booru) != -1) {
      setBooru(booru);
      setbaseTagifySetting(createBaseTagSettings(booruTagLimit[booru]));    
    }
  }
  const onTagChange = (e: any) => {
   e.persist();
   console.log(e.target.value);
  }

  console.log("prior to return", settings);
  
  //omitting alot of excess html stuff here.
  return (
    <div>
              <Tags
                tagifyRef={tagifyRef}
                settings={settings}
                onChange={onTagChange}
              />
            
            <div className="col-md-2">
              <select id="booru" className="custom-select custom-select-sm"
                onChange={onBooruChange}>
                <option selected>Select Booru to use</option>
                {
                  BOORUS.map((booru: string) => {
                    return <option value={booru}>{booru}</option>
                  })
                }
              </select>
            </div>
           
    </div >

  );
}

当我尝试从该DEF_BOORU选项切换到具有更高 maxTags 编号的其他选项时，tagify 搜索栏会自动删除多余的标签（maxTgas 似乎确实会更新）。但是返回之前的日志语句显示了具有正确 maxTags 属性的正确设置对象。

有谁知道为什么会这样？请注意，如果我尝试使用 tagifyRef 更改 maxTags，它会起作用。

4

0 回答 0