[英]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.