删除文本区域中默认值字符串之前/之后出现的逗号



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

例如,这是我在文本区域(材料ui(值/占位符中得到的:("Drosophila,"(,如果我在本地存储中添加更多条目,逗号就会加起来(例如"Drosopila,,,"或",Drosophira,"(

如果我在div标记内调用函数,它可以正常工作,但在textarea标记上不行(https://i.stack.imgur.com/1qIeH.jpg)(https://i.stack.imgur.com/OYfoC.jpg)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;
}
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) || ""

从这个答案中抓取:如何从动态反应材料UI文本字段循环中删除逗号

我不得不想出一个解决这个问题的办法。由于我使用div标记而不是textarea标记正确命名,所以我所做的就是让div表现得像textarea。我没有改变功能。

HTML(使用react(:

<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;
}

最新更新