如何使用e.target訪問用戶定義的屬性值-javascript / react.js

Question

我正在嘗試訪問值keyboard_arrow_down ，但不確定如何操作。當我給e.target.innerText ，我得到keyboard_arrow_downSample Forms ，但是我只需要keyboard_arrow_down

以下是'react-materialize'可折疊的下拉元素

<CollapsibleItem id={index}  header={item.title} icon='keyboard_arrow_down' onClick={this.changeIcon}>
</CollapsibleItem>

以下代碼在onClick事件上執行

changeIcon(e) {

        var currElmTxt = e.target.innerText
        console.log('e.target',e.target);
        console.log('e.target.innerText', e.target.innerText);
        //var iconTxt = e.target.innerText === "keyboard_arrow_down" ? "keyboard_arrow_up" :("keyboard_arrow_up"? "keyboard_arrow_down");
        if(e.target.innerText === "keyboard_arrow_down"){
            e.target.innerText = 'keyboard_arrow_up';    
        } else if(e.target.innerText === "keyboard_arrow_up"){
            e.target.innerText = 'keyboard_arrow_down'; 
        } else {}

        //console.log('e.target', e.target);

    }

以下是e.target的控制台打印。

<div class="collapsible-header active">
        <i class="material-icons">keyboard_arrow_down</i>
        Sample Forms
    </div>

Answer 1

您只需要選擇i元素

e.target.querySelector('i.material-icons').innerText