突出显示列表项react.js

我想保留当前单击列表项的背景色和颜色。我已经通过css突出显示了以下代码:

.segmentsList:hover {
    background: black;
    color: white;
    cursor: pointer;
}

我尝试将onclick函数附加到li中的onclick事件,如下所示:

import React, {Component} from 'react';
import Link from "react-router-dom/es/Link";
import {Button} from 'reactstrap';
import cabeza from '../atlas/json/cabeza.json';

const parte = getParameterByName('parte') || 0;


export default class SegmentsList extends Component {

    onClickFunction(e) {
        console.log(e);
        // e.target.element.class="newBlackColor";
    }

    render() {


        console.log(cabeza[parte].etiquetas);
        readTextFile(cabeza[parte].etiquetas);

        function readTextFile(url) {
            const rawFile = new XMLHttpRequest();
            rawFile.open("GET", url, false);
            rawFile.overrideMimeType('text/xml; charset=iso-8859-1');
            rawFile.onreadystatechange = function () {
                if (rawFile.readyState === 4) {
                    const text = rawFile.responseText;
                    // console.log(rawFile.responseText);
                    const lines = splitLines(text);
                    // console.log(lines);
                    const words = splitWords(lines[0]);
                    // console.log(words);
                    window.words = words;
                }
                return;

                function splitLines(text) {
                    return text.split('\n');
                }

                function splitWords(line) {
                    return line.split('" "').slice(1);
                }
            };
            rawFile.send();
        }


        return (

            <div>
                <ol>
                    {window.words.map((word, index) =>
                        <li
                            onClick={this.onClickFunction}
                            className='segmentsList'
                            key={index}>{word}</li>
                    )}
                </ol>

                <Button
                    color='primary'
                    className='mt-3 ml-3'
                >
                    <Link to='/'/>
                    Volver a la portada
                </Button>
            </div>

        );
    }
}

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

当我单击列表项时,控制台会显示:

Uncaught TypeError: Cannot set property 'class' of undefined

并检查事件对象,我们看到目标为空:

target:null

我做错什么了?

我也读过:

CSS Change List Item Background Color with Class

How to give a different color to a selected list item with CSS?

Highlight item onClick - React.js

编辑:

我想突出显示单击的一个,并删除前一个单击的突出显示。

我已经写了一个方法来突出显示列表元素,并一直突出显示,直到您再次单击它:

节段列表.js

import React, {Component} from 'react';
import Link from "react-router-dom/es/Link";
import {Button} from 'reactstrap';
import cabeza from '../atlas/json/cabeza.json';
import SegmentsListItem from "./SegmentsListItem";

const parte = getParameterByName('parte') || 0;


export default class SegmentsList extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        console.log(cabeza[parte].etiquetas);
        readTextFile(cabeza[parte].etiquetas);

        function readTextFile(url) {
            const rawFile = new XMLHttpRequest();
            rawFile.open("GET", url, false);
            rawFile.overrideMimeType('text/xml; charset=iso-8859-1');
            rawFile.onreadystatechange = function () {
                if (rawFile.readyState === 4) {
                    const text = rawFile.responseText;
                    // console.log(rawFile.responseText);
                    const lines = splitLines(text);
                    // console.log(lines);
                    const words = splitWords(lines[0]);
                    // console.log(words);
                    window.words = words;
                }
                return;

                function splitLines(text) {
                    return text.split('\n');
                }

                function splitWords(line) {
                    return line.split('" "').slice(1);
                }
            };
            rawFile.send();
        }


        return (
            <div>
                <ol>
                    {window.words.map((word, index) =>
                        <SegmentsListItem word={word} key={index}/>
                    )}
                </ol>

                <Button
                    color='primary'
                    className='mt-3 ml-3'
                >
                    <Link to='/'/>
                    Volver a la portada
                </Button>
            </div>

        );
    }
}

function getParameterByName(name, url) {
    if (!url) url = window.location.href;
    name = name.replace(/[\[\]]/g, "\\$&");
    var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
        results = regex.exec(url);
    if (!results) return null;
    if (!results[2]) return '';
    return decodeURIComponent(results[2].replace(/\+/g, " "));
}

节段拼接.js

import React, {Component} from 'react';

class SegmentsListItem extends Component {
    constructor(props) {
        super(props);

        this.state = {highlighted: false};

    }

    highlight = (e) => {
        console.log(e.target.className);
        if (!this.state.highlighted) {
            console.log('highlight');
            e.target.className = 'segmentsListSelected';
        } else {
            console.log('remove highlight');
            e.target.className = 'segmentsList';
        }
        this.setState({highlighted: !this.state.highlighted})
    };

    render() {


        return (
            <li
                onClick={this.highlight}
                className='segmentsList'
                key={this.props.index}>{this.props.word}</li>
        );
    };
}

export default SegmentsListItem;

谢谢你的帮助。