mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
fix: TagInput component values initialization
This commit is contained in:
parent
60ae7706bd
commit
593177f6e1
1 changed files with 23 additions and 8 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useState, Dispatch, SetStateAction } from 'react'
|
import React, { useState, Dispatch, SetStateAction, useEffect } from 'react'
|
||||||
import { Tag, TagInput } from 'emblor'
|
import { Tag, TagInput } from 'emblor'
|
||||||
|
|
||||||
interface FormTagInputProps {
|
interface FormTagInputProps {
|
||||||
|
|
@ -16,14 +16,29 @@ const FormTagInput = ({
|
||||||
error,
|
error,
|
||||||
placeholder,
|
placeholder,
|
||||||
}: FormTagInputProps) => {
|
}: FormTagInputProps) => {
|
||||||
const initialTags = value
|
const [tags, setTags] = useState<Tag[]>(() =>
|
||||||
? value.split(separator).map((text, i) => ({
|
value && typeof value === 'string'
|
||||||
id: i.toString(),
|
? value.split(separator).filter(text => text.trim()).map((text, i) => ({
|
||||||
text: text.trim(),
|
id: i.toString(),
|
||||||
}))
|
text: text.trim(),
|
||||||
: []
|
}))
|
||||||
|
: []
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (value && typeof value === 'string') {
|
||||||
|
const newTags = value.split(separator)
|
||||||
|
.filter(text => text.trim())
|
||||||
|
.map((text, i) => ({
|
||||||
|
id: i.toString(),
|
||||||
|
text: text.trim(),
|
||||||
|
}));
|
||||||
|
setTags(newTags);
|
||||||
|
} else {
|
||||||
|
setTags([]);
|
||||||
|
}
|
||||||
|
}, [value, separator]);
|
||||||
|
|
||||||
const [tags, setTags] = useState<Tag[]>(initialTags)
|
|
||||||
const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null)
|
const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null)
|
||||||
|
|
||||||
const handleTagsChange: Dispatch<SetStateAction<Tag[]>> = (
|
const handleTagsChange: Dispatch<SetStateAction<Tag[]>> = (
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue