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

Question

当我点击字符串中的第一个和最后一个字符时，我将在字符串的一部分创建边框。例如："exampleString" 我点击 S 和 g 并点击某个按钮，之后屏幕将仅在 "exampleString" 中显示 "String" 的边框。

在我的代码中，我将字符串从 table 数组拆分为拆分数组，当我单击字符时它将调用 handleClick() 以保持索引（f 是第一个字符的索引，l 是第一个字符的索引最后一个字符）。单击我需要的字符串的第一个和最后一个字符后，我将单击创建按钮，然后调用创建函数以将字符串保留在 f 到 l 之间的拆分数组中，然后在屏幕上显示文本边框，如下所示 "exampleTexts"。我点击 T 和 s，所以 f=7 和 l=11 然后点击创建按钮。在创建数组中是这样的 ["T","e","x","t","s"]。之后，它会在屏幕上显示 "Texts" 的边框。

非常感谢你对我的帮助。

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

Answer 1

你可以利用react-highlighter,

import Highlight from 'react-highlighter';

<Highlight search="brown" matchClass="abc">The quick brown fox jumps over the lazy dog</Highlight>

matchClass 属性是将 class 名称添加到字符串的突出显示部分。使用此 class 名称，您可以更改突出显示部分的样式，

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

Demo

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

How to create border a part of string when click : Reactjs

javascript

reactjs