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

如何使用e.target访问用户定义的属性值-javascript / react.js

1 个答案: