我有一个自定义的自动完成功能，所以当你输入时，它会根据输入值显示一个建议列表。在列表中，我想将与输入值相同的字符加粗。
因此，如果我有一个建议列表：“鳄鱼”、“利马”、“石灰”，并且我输入了“li”，那么建议将如下所示：
- 人李鳄鱼
- 李马
- 理我
map我的 jsx 文件中有这个简单的内容：
<ul>
{matches.map(function(match, idx){
let re = new RegExp(value, 'g');
let str = match.replace(re, '<b>'+ value +'</b>');
return <li key={idx}>{str}</li>
})}
</ul>
value输入值在哪里。它以这种字符串格式显示列表
- al<b>li</b>鳄鱼
- <b>李</b>妈
- <b>我</b>我
不知道如何使用 React。我想过使用dangerouslyinnerhtml或类似的东西，但我认为这是最后的手段。如果可能的话，我想避免这种情况。
这是我的自动完成组件：
class Autocomplete extends Component{
constructor(props){
super(props);
this.state = {
value: '',
matches: [],
showMatches: false
}
}
searchListing(){
api.call {
that.setState({
showMatches: true,
matches: a
});
})
}
}
handleOnChangeInput(e){
let value = e.target.value;
this.setState({ value: value})
if(value !== ''){
this.searchListing(e);
}else{
// console.log("value", e.target.value);
this.setState({
showMatches: false,
matches: []
})
}
}
render(){
let matches = this.state.matches;
let value = this.state.value;
let matchesHtml;
if(this.state.showMatches){
matchesHtml = <ul>
{matches.map(function(match, idx){
let re = new RegExp(value, 'g');
let str = match.replace(re, '<b>'+ value +'</b>');
return <li key={idx} dangerouslySetInnerHTML={{__html: str}}></li>
})}
</ul>
}
return(
<div>
<input placeholder="type a name" onChange={this.handleOnChangeInput}/>
{matchesHtml}
</div>
);
}
}