javascript - 单击:Reactjs时如何更改部分字符串的样式

Question

单击时我将更改字符串一部分的样式。例如“TEXT”，然后单击“T”，之后它会将样式从黑色更改为红色，仅 T在我的代码中，当我单击文本时，我拆分文本并保留在“split”数组中，它将调用handleClick函数并发送我单击的字符索引作为参数。例如(“EXAMPLE”)当我点击 E 时，它会发送 0 为 handleClick 函数的参数。

import React,{Component} from 'react'
export default class Test extends Component {
    handleClick = (index) => {
        console.log(index)
    }
    render() {
        return(
            <div>
                {this.state.table.map((text) => {{this.state.split 
                    && this.state.split.map((item, index) => { 
                        return(
                            <span key={index} onClick={() => 
                                this.handleClick(index)}>{item} 
                            </span>
                         );
                })}
            </div>
        )
    }
 }

Answer 1

您需要一个能够维护点击索引的状态。然后在渲染分割跨度时使用该索引来设置不同颜色的类名。然后您可以将您的样式应用到该类。

export default class Test extends Component {

    handleClick = (index) => {
        this.setState({ clickedIndex: index });
    }
    render() {
        return (
            <div>
                {this.state.table.map((text) => {
                    this.state.split && this.state.split.map((item, index) => {
                        return (
                            <span key={index} style={clickedIndex === index ? {color: 'red'} : {}} onClick={() =>
                                this.handleClick(index)}>{item}
                            </span>
                        );
                    })
                })}
            </div>
        )
    }
}