Javascript 从条件变量调用函数-ReactJS

我有一个按钮A，内容是“所有类别”。当我单击此按钮时，我希望按钮a上方有一个包含“show more”内容的div，以显示其他6个按钮，每个按钮由“category 1”、“category 2”到6个组成。（和“显示更多”以消失）。单击这6个按钮中的任何一个都会隐藏这6个按钮，并返回到“showmore”div

代码

var React = require('react');

module.exports = React.createClass({

    getInitialState: function() {
        return ({
            category: false,
            selected: 'Total',
            categories: [
                {
                    name: 'Button 1',
                    id: 1,

                },
                {
                    name: 'Button 2',
                    id: 2,
                },
                {
                    name: 'Button 3',
                    id: 3,
                },
                {
                    name: 'Button 4',
                    id: 4,
                },
                {
                    name: 'Button 5',
                    id: 5,
                },
                {
                    name: 'Button 6',
                    id: 6,
                }
            ]

        })
    },


    selectCategory: function(event) {
        (this.state.category) ? this.setState({category: false}) : this.setState({category: true})
    },


    render: function() {

        if(this.state.category == true) {

            var category = this.state.categories.map(function(category){
                return (
                        <div 
                           className="category-container"  
                           onClick={this.selectCategory}>

                            <span> {category['name']} </span>

                        </div>
                )
            })


        } else {
            var category = (
                <span id="showplease" onClick={this.selectCategory}> Show more </span>
            )
        }

        console.log(this.state.selected)

        return (    
            <div id="landing"> 

                <div id="search-container">
                    <div id="category-selector-container">
                        {category}
                        <div id="selector" onClick={this.selectCategory}> Button A </div>
                    </div>
                </div>
            </div>
        )
    }
})

var React=require（'React'）；
module.exports=React.createClass({
getInitialState:函数（）{
返回({
类别:假,，
已选择：'总计'，
类别：[
{
名称：“按钮1”，
id:1，
},
{
名称：'按钮2'，
id:2，
},
{
名称：'按钮3'，
id:3，
},
{
名称：'按钮4'，
id:4，
},
{
名称：'按钮5'，
id:5，
},
{
名称：'按钮6'，
id:6，
}
]
})
},
选择类别：功能（事件）{
（this.state.category）？this.setState（{category:false}）：this.setState（{category:true}）
},
render:function（）{
if（this.state.category==true）{
var category=this.state.categories.map（函数（类别）{
返回(
{category['name']}
)
})
}否则{
变量类别=(
显示更多
)
}
console.log（this.state.selected）
报税表（
{类别}
按钮A
)
}
})

很简单。这是我的问题：单击6个按钮中的任何一个都不会改变状态，好像在映射之后，单个组件丢失了“onClick={this.selectCategory}”部分。但是，单击“显示更多”div将运行selectCategory功能，并显示6个按钮

有什么帮助吗？我可以简单地避免映射并单独重复按钮，但我想知道为什么这不起作用

---

提前谢谢你

您的问题涉及

此

变量。无论何时创建新的

函数

，都会为该创建一个新的上下文，而旧的上下文将丢失

有几种方法可以解决这个问题。一种常见的方法是将

this

分配给不同的变量，例如

var self=this。另一种方法是使用
bind
，以确保
此
从外部作用域传递。i、 e

var category = this.state.categories.map(function (category) {
    return (
        <div 
            className="category-container"  
            onClick={this.selectCategory}
        >
            <span>{category['name']}</span>
        </div>
     );
 }.bind(this));

var category = this.state.categories.map((category) => (
    <div 
        className="category-container"  
        onClick={this.selectCategory}
    >
        <span>{category['name']}</span>
    </div>
));