时间戳

首页 > 解决方案 > 单击时如何为字符串的一部分创建边框：Reactjs

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

问题描述

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

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

标签： javascriptreactjs

解决方案

你可以利用react-highlighter,

import Highlight from 'react-highlighter';

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

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

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

演示

推荐阅读