删除出现在 textarea 中默认值字符串之前/之后的逗号答案

【问题标题】：Remove comma appearing before/after default value string in textarea删除出现在 textarea 中默认值字符串之前/之后的逗号
【发布时间】：2021-09-10 23:05:18
【问题描述】：

我想检索与其值匹配的序列的名称（在 localStorage 中）。我想了解为什么这会返回预期的名称（字符串）和逗号，以及如何解决这个问题。提前谢谢你

例如，这是我在 textarea (material-ui) 值/占位符中得到的：(“Drosophila”)，如果我向本地存储添加更多条目，逗号将加起来（例如“Drosophila,, ,," 或 ",果蝇,)

如果我在 div 标签内调用该函数，它可以正常工作，但不能在 textarea 标签上 (https://imgur.com/a/3FjBuu0) (https://imgur.com/a/l0clQXs) div 标签是下面的标签。我需要它在像标签这样的文本区域中

    getSeq2Name() {
        var archive = [],
        keys = Object.keys(localStorage),
        i = 0, key;
        
        for (; key = keys[i]; i++) {
            archive.push( 'Sequence Name: ' + key + ' \n ' + localStorage.getItem(key) + '\n');
        }
        
        var mappedArchive = archive.map((item, i) => {
            var values = Object.values(localStorage)[i]
            for (; values.includes(store.getState().s2); i++) {
                return Object.keys(localStorage).find(key => localStorage[key] === values);
                }
        });

        if (!Object.values(localStorage).includes(this.state.activeSequence === 2 ? store.getState().s2 : store.getState().s2)) {
            return "Sequence 2"
        }

        return mappedArchive;
    }

【问题讨论】：

标签： javascript reactjs react-native material-ui

【解决方案1】：

var mappedArchive = archive.map((item, i) => {
            var values = Object.values(localStorage)[i]
            for (; values.includes(store.getState().s2); i++) {
//set the return of this to a variable to see what you are recieving
                return Object.keys(localStorage).find(key => localStorage[key] === values);
                }
        });

  const data = Object.keys(localStorage).find(key => localStorage[key] === values);
//then you can console.log to see what you are getting, and then you can only return the names
//only return if data is truthy, or if you find some key being truthy
//otherwise return an empty string
//here is an example of what you might return
   return (data && data.key) || ""

从这个答案中得到： how to remove comma from dynamic react Material UI Text field loop

【讨论】：

我这样做并做了一个console.log数据和data.key。对于数据，我得到正确的名称，没有逗号（虽然它我把返回数据也得到了逗号），对于 data.key，我得到“未定义”。有什么想法吗？
因此，如果您使用 console.log 数据，您可以在没有逗号的情况下正确看到它，但如果您返回数据，逗号是否存在？
正是...另外，如果我返回 (data && data.key) || "" 我得到的只是逗号

【解决方案2】：

我不得不想出一个解决这个问题的办法。由于我使用 div 标签而不是 textarea 标签正确命名，因此我所做的是使 div 的行为类似于 textarea。我没有更改功能。

HTML（使用反应）：

<div contentEditable='true' className={s.divtextarea}
     placeholder={"Sequence name: "}
     onInput={this.onChangeSeqName}
     style={{fontFamily: 'Courier New'}}>
          {this.state.activeSequence === 1 ? this.getSeq1Name() : this.getSeq2Name()}
</div>

CSS：

.divtextarea {
   border-bottom: 1px solid #e8e8e8;
   overflow: auto; 
   padding: 8px;
   width: 100%;
   box-sizing: border-box;
   font: inherit;
   line-height: inherit;
   color:#000;
   cursor: auto;
}

.divtextarea:empty:before{
   content: attr(placeholder);
   color: #ccc;
}

【讨论】：