Question

我有这个按钮A，内容为“所有类别”。当我点击这个按钮时，我想在按钮A上方显示内容“显示更多”的div，以显示6个其他按钮，每个按钮由“类别1”，“类别2”组成，最多6个。（和“显示更多”消失）。单击这6个按钮中的任何一个将隐藏6个按钮，然后返回到“显示更多”div。

CODE

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>
        )
    }
})

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

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

提前谢谢！

Answer 1

您的问题涉及this变量。每当您创建新的function时，都会创建this的新上下文，旧的上下文将丢失。

有几种方法可以解决这个问题。常见的一种方法是将this分配给不同的变量，例如var self = this;。另一种方法是使用bind来确保从外部作用域传递this。即。

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

如果您正在使用ES6，最好的方法是使用自动绑定this的箭头功能。

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

从条件变量调用函数 - ReactJS

1 个答案: