繁体   English   中英

试图在 formik 中设置输入字段的值

[英]Trying to set the value of input field in formik

我正在尝试使用 react、mui、formik 和 yup 创建一个职位发布表单,我在其中创建了一个与 stackoverflow 相同的标签输入字段,但是当我在使用 setTags 添加新标签后设置标签的值时,它正在添加倒数第二个标签不是最后一个。

   import { TextField } from '@material-ui/core';
   import "../../App.css";
   const TagsInput = props => {
     const [tags, setTags] = React.useState(props.tags);
     const removeTags = indexToRemove => {
       setTags([...tags.filter((_, index) => index !== indexToRemove)]);
        };
     const addTags = (event,tags) => {
        if (event.target.value !== "") {
             setTags([...tags, event.target.value]);
             props.selectedTags([...tags, event.target.value]);
             props.setFieldValue('tag',tags)
             event.target.value = "";
             }
        };
    return (
        <div className="tags-input">
            <ul id="tags">
                {tags.map((tag, index) => (
                    <li key={index} className="tag">
                        <span className='tag-title'>{tag}</span>
                        <span className='tag-close-icon'
                            onClick={() => removeTags(index)}
                        >
                            x
                        </span>
                    </li>
                ))}
            </ul>
            <TextField
               type="text"
                onKeyUp={event => event.key === "Enter" ? addTags(event,tags) : null}
                placeholder="Add tags"
            />
        </div>
    );
};

export default TagsInput```

 Props which i have passed 
props = <selectedTags={selectedTags} setFieldValue={setFieldValue}  tags={[]}>

Example:
like if i enter *html* as first tag then it sets *[]* as value of tag 
if i enter *css* as sencond tag then it sets *['html']* as value of tag
if i enter *js* as third tag then it sets *['html','css']* as value of tag

Plese help me out how can i fix this bug.


由于缺少 props.selectedTags()、props.setFieldValue() 的实现,因此通过提供使用 TagsInput 的组件可能会增加您获得答案的机会。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM