Javascript 用逗号分隔的双向绑定字符串

发布于05月18日

这是我的目标:

const [opportunity, setOpportunity] = useState({
    name: '',
    description: '',
    experience: '',
});

我想将其存储在opportunity experience属性中，就像用逗号分隔的字符串一样.例如:"experience\u 1，experience\u 2，experience\u 3".

但是，当我在输入字段中键入时，我希望能够在单词之间留有空格.例如:experience\u 1 experience\u 2 experience\u 3

这是我输入字段的代码:

        <InputField
        type='text'
        value={opportunity.experience.split(',').join(' ')} // i think i need changes here
        onChange={(e) => setOpportunity({ ...opportunity, experience: e.currentTarget.value.split(" ").filter(x => x !== '').toString() })} // i think this works
        label={"Experiences"}
    />

有人帮忙吗？

推荐答案

将.filter(x => x !== '')替换为.replace(/\s+/g, " ")，并将其放置在调用.split()方法之前.这将用单个空间替换多个空间，并防止用户一次输入多个空间，同时允许他们更改InputField组件的内容.请记住，.filter()处理字符串的克隆副本，而.replace()处理字符串本身，在本例中是事件当前目标值.

现在它应该按预期工作.

像这样:

<InputField
    type="text"
    value={opportunity.experience
      .split(",")
      .map((x) => x.trim()) // Added .trim() to keep consistent spacing...
      .join(" ")} // ...before joining
    onChange={(e) => {
      setOpportunity({
        ...opportunity,
        experience: e.currentTarget.value
          .replace(/\s+/g, " ") // If you try to use .filter() here, it won't work
          .split(" ")
          .toString(),
      });
    }} 
    label={"Experiences"}
  />

我还将state属性中的每个值上的trim操作链接为.map()，以便在演示过程中保持间距一致，以防state属性在每个经验值之间使用大量空格进行初始化.