Javascript 单击：Reactjs时如何创建字符串的一部分边框

当我单击字符串中的第一个和最后一个字符时，我将创建字符串的一部分边框。例如：“exampleString”我在S和g处单击，然后单击一些按钮，屏幕将仅在“exampleString”中显示“String”处的边框

在我的代码中，当我单击字符时，我将字符串从表数组拆分为拆分数组，它将调用

handleClick（）

作为保留索引（f是第一个字符的索引，l是最后一个字符的索引）。单击我需要的字符串的第一个和最后一个字符后，我将单击“创建”按钮，然后调用创建函数，将字符串保持在f到l之间的拆分数组中，然后在屏幕上显示文本边框，如“exampleTexts”所示。我在T和s处单击，因此f=7和l=11，然后单击创建按钮。在create中，数组是[“T”，“e”，“x”，“T”，“s”]如下所示。之后，它将在屏幕上显示“文本”处的边框

非常感谢你对我的帮助

import React, { Component } from 'react'
import '../App.css'

class create extends Component {

    handleClick(index) {
        if(c == 1) { this.state.f = index
                     c = c+1 }
        if(c == 2) { this.state.l = index 
                     c = 1 }

    handleCreate = () => {
        let s = []
        let j = 0
        for (let i = indexF; i <= indexL; i++) {
            s[j] = this.state.split[i]
            j= j+1
        }
    }

    render() {
        return (
            <div>
                {this.state.split && this.state.split.map((item, index) => {
                    return(
                        <span key={index} onClick={() => this.handleClick(index)}>{item}</span>
                    );
                })}
                <button onClick={this.handleCreate>create</button>
            </div>
        )
    }
}

export default create

import React，{Component}来自“React”
导入“../App.css”
类创建扩展组件{
handleClick（索引）{
如果（c==1）{this.state.f=index
c=c+1}
如果（c==2）{this.state.l=index
c=1}
handleCreate=（）=>{
让s=[]
设j=0
for（设i=indexF；i{
返回(
this.handleClick（index）}>{item}
);
})}
创造
)
}
}
导出默认创建

您可以使用

反应荧光灯

import Highlight from 'react-highlighter';

---

您可以使用

反应荧光灯

import Highlight from 'react-highlighter';

---

试试这个-我可以改变突出显示颜色吗？试试这个-我可以改变突出显示颜色吗？我不能在突出显示中使用搜索，因为我需要将文本保持如下数组[“e”、“x”、“a”、“m”、“p”、“l”、“e”、“t”、“e”、“x”、“t”]。当我使用search=“example”时，它不能突出显示它。但如果我使用search=“e”，它可以在exampleText中突出显示在“e”处。非常感谢：）我不能在突出显示中使用搜索，因为我需要将文本保持为如下数组[“e”、“x”、“a”、“m”、“p”、“l”、“e”、“t”、“e”、“x”、“t”]。当我使用search=“example”时，它不能突出显示它。但如果我使用search=“e”，它可以在exampleText中突出显示在“e”处。非常感谢：）

.abc{
  background-color: #000;
  color: #fff;
  padding: 5px;
}