Reactjs 反应,标记maxTags不更新
在我的react应用程序中,我有一个标记栏。maxTags属性取决于用户输入。目前为止,我有:Reactjs 反应,标记maxTags不更新,reactjs,tags,react-lifecycle-hooks,Reactjs,Tags,React Lifecycle Hooks,在我的react应用程序中,我有一个标记栏。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
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似乎要更新的多余标记。但是,在返回之前的log语句显示了具有正确maxTags属性的正确设置对象
有人知道为什么会这样吗?请注意,如果我尝试使用TagifRef更改maxTags,它会起作用