Question

我是ReactJS的新手并尝试制作一个小型Web应用程序。我有一个要放在侧边栏中的项目列表，我希望每个项目在单击时返回侧边栏的状态（这样我可以相应地设置活动链接的样式）。

import React, {Component} from 'react';
import SideBarItem from "./SideBarItem";

const items = {
    'DASHBOARD' : 'home',
    'Utenti': 'user',
    'Corsi' : 'education',
    'Logistica' : 'check',
    'Comunicazioni': 'bullhorn'
};

const listItems = Object.entries(items).map(([key,value])=>{
    return <SideBarItem 
                onClick={this.changeState(key)} active={this.state.active == key ? 'active' : ''} 
                title={key} 
                glyph={'glyphicon glyphicon-' + value.toString()}/>
});

class SideBar extends Component {
    constructor(props) {
        super(props);
        this.state = {active: 'DASHBOARD'};
}

    changeState (row) {
        this.setState({
            active: row
        });
    }

    render() {
        return (
            <div id = "sidebar" className="col-sm-3 col-md-2 sidebar paper-depth-1">
                <ul className = 'nav nav-sidebar'>
                    {listItems}
                </ul>
            </div>
        );
    }
}


export default SideBar;

但是这段代码返回了以下错误：

TypeError: _this.changeState is not a function

我理解从外部变量调用组件函数有问题，但我不知道如何以其他任何方式使用它。

Answer 1

如果您在render()中创建项目列表，this范围将是您需要的组件实例。

class SideBar extends Component {
    constructor(props) {
        super(props);
        this.state = {active: 'DASHBOARD'};
    }

    changeState(row) {
        this.setState({
            active: row
        });
    }

    render() {
        return (
            <div id="sidebar" className="col-sm-3 col-md-2 sidebar paper-depth-1">
                <ul className="nav nav-sidebar">
                    {Object.entries(items).map(([key,value]) =>
                        <SideBarItem 
                            onClick={() => this.changeState(key)}
                            active={this.state.active == key ? 'active' : ''} 
                            title={key} 
                            glyph={'glyphicon glyphicon-' + value.toString()}
                        />
                    )}
                </ul>
            </div>
        );
    }
}

ReactJS。从外部变量调用函数

1 个答案: