Javascript React.js-如何创建手风琴（与兄弟姐妹交谈）_Javascript_Accordion_Reactjs

Javascript React.js-如何创建手风琴（与兄弟姐妹交谈）

javascript reactjs

Javascript React.js-如何创建手风琴（与兄弟姐妹交谈）,javascript,accordion,reactjs,Javascript,Accordion,Reactjs,我刚开始使用react.js，我喜欢组件的工作方式。我创建了一个Card组件，单击该组件将添加一个css类展开的。这很有魅力。现在，我希望单击另一张卡后，所有其他卡都在那里松开expandedproperty。在jQuery中，我会使用同级来实现这一点 react.js的正确解决方案是什么这是我的密码： var Card = React.createClass({ getInitialState: function () { return {

我刚开始使用react.js，我喜欢组件的工作方式。我创建了一个

Card

组件，单击该组件将添加一个css类

展开的

。这很有魅力。现在，我希望单击另一张卡后，所有其他卡都在那里松开

expanded

property。在jQuery中，我会使用

同级来实现这一点
react.js的正确解决方案是什么
这是我的密码：
var Card = React.createClass({

    getInitialState: function () {
        return {
            expanded: false,
            //clickCount: 0
        };
    },

    handleClick: function (event) {
        this.setProps({expanded: !this.props.expanded});
    },

    render: function () {
        var cx = React.addons.classSet;
        var classes = cx({
            'card': true,
            'expanded': this.state.expanded
        });

        return (
            <li className={classes} onClick={this.handleClick}>
                <h1>{this.props.name}</h1>
                <h2>{this.props.entf.toFixed(2)} km</h2>
            </li>
        )
    }

});


var App = React.createClass({

    handleClick: function (event) {
        console.log("clicked");
    },

    render: function () {

        var pools = this.props.data.map(function (pool) {
            return (
                <Card onClick={this.handleClick} name={pool.name} entf={pool.entf} />
            );
        });

        return (<ul>
                {pools}
        </ul>
        )
    }
});

var Card=React.createClass({
getInitialState:函数（）{
返回{
扩展：错，
//点击次数：0
};
},
handleClick:函数（事件）{
this.setProps（{扩展：！this.props.expanded}）；
},
渲染：函数（）{
var cx=React.addons.classSet；
变量类=cx({
"卡":对,，
“扩展”：this.state.expanded
});
返回(

{this.props.name}
{this.props.entf.toFixed（2）}km

)
}
});
var App=React.createClass({
handleClick:函数（事件）{
控制台日志（“单击”）；
},
渲染：函数（）{
var pools=this.props.data.map（函数（池）{
返回(
);
});
返回（
{pool}

)
}
});
您应该在应用程序
组件的状态
中保留扩展卡的标识符，而不是使用同级
，并在所选卡发生更改时让React重新渲染
下面是一个使用react执行此操作的示例：
JSfiddle：
var Card=React.createClass({
渲染：函数（）{
var cx=React.addons.classSet；
变量类=cx({
"卡":对,，
“扩展”：this.props.expanded
});
返回(

{this.props.name}
{this.props.entf.toFixed（2）}km

)
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{expandedCardName:null}；
},
handleClick:函数（值）{
this.setState（{expandedCardName:value}）；
},
渲染：函数（）{
var pools=this.props.data.map（函数（池）{
返回(
);
}.约束（这个）；
返回（
{pool}

)
}
});
var data=[{name:“card1”，entf:60}，{name:“card2”，entf:50}]；
React.render（，document.body）；
React不是超级吗
为了在不做太多修改的情况下获得所需的行为，我建议将回调onClick
或onExpand
传递给每个
。当一张卡被激活时，它会运行回调，该回调可以在应用程序的状态中设置一个变量（可能是activeCard
）。在应用程序的渲染方法中，修改映射函数，为每张卡提供一个扩展的
布尔属性，该属性将根据卡的名称/id是否匹配activeCard
而定。在每张卡的逻辑中使用新的expanded
道具，而不是this.state.expanded

var Card = React.createClass({

render: function () {
    var cx = React.addons.classSet;
    var classes = cx({
        'card': true,
        'expanded': this.props.expanded
    });

    return (
        <li className={classes} onClick={this.props.onClick}>
            <h1>{this.props.name}</h1>
            <h2>{this.props.entf.toFixed(2)} km</h2>
        </li>
    )
}

});


var App = React.createClass({

getInitialState: function () {
    return { activeCard: '' }
},

render: function () {

    var pools = this.props.data.map(function (pool) {
        return (
            <Card onClick={this.handleClick.bind(this,pool.name)} name={pool.name} entf={pool.entf} expanded={pool.name == this.state.activeCard} />
        );
    }.bind(this));

    return (<ul>
            {pools}
    </ul>
    )
},

handleClick: function (value) {
    this.setState({ activeCard: value })
}
});

var Card=React.createClass({
渲染：函数（）{
var cx=React.addons.classSet；
变量类=cx({
"卡":对,，
“扩展”：this.props.expanded
});
返回(

{this.props.name}
{this.props.entf.toFixed（2）}km

)
}
});
var App=React.createClass({
getInitialState:函数（）{
返回{activeCard:'}
},
渲染：函数（）{
var pools=this.props.data.map（函数（池）{
返回(
);
}.约束（这个）；
返回（
{pool}

)
},
handleClick:函数（值）{
this.setState（{activeCard:value}）
}
});

在React中工作时，请考虑如何使组件尽可能保持无状态。在jQuery这样的范例中，这些部分通常会自行管理，但如果您想利用React的潜力，那么请始终注意如何“滴流”到状态。
请注意，类集正在被弃用，因此您可能希望在有时间时切换到（api是100%兼容的）。您的解决方案可以工作，而上面的@Miles中的一个则没有。他的解决方案忽略了map函数上的“final.bind（this）”。你能解释一下这个“绑定”的作用吗？bind
创建了一个新函数，其上下文（this
的值）等于它的第一个参数。第一个参数之后的参数将在调用时作为函数的参数。更多信息：使用@Miles answer时，此
将不会指向映射
函数中的React Components上下文。因此，this.handleClick
和this.state
将是未定义的
。谢谢。我现在有点头晕了。对于像我这样的新用户，我会建议让代码更容易理解。在onClick={this.handleClick.bind（this，pool.name）}
行中，onClick
不是真正的onClick事件，而是传递给组件的道具。我花了一些时间才意识到这一点，因为它们被称为相同的。如果把这些道具称为clickHandler之类的东西，或者我是不是想得太多了，这不是更好吗。但是，您的代码不起作用，它缺少附加到map函数的“bind（this）”（取自@nilgun的代码）。“它就像一个符咒，”莱奥索克·霍霍普斯说。下次我将在Sublime中编辑此内容。但答案中已修复。我只是在代码里找不到我的位置。
var Card = React.createClass({

render: function () {
    var cx = React.addons.classSet;
    var classes = cx({
        'card': true,
        'expanded': this.props.expanded
    });

    return (
        <li className={classes} onClick={this.props.onClick}>
            <h1>{this.props.name}</h1>
            <h2>{this.props.entf.toFixed(2)} km</h2>
        </li>
    )
}

});


var App = React.createClass({

getInitialState: function () {
    return { activeCard: '' }
},

render: function () {

    var pools = this.props.data.map(function (pool) {
        return (
            <Card onClick={this.handleClick.bind(this,pool.name)} name={pool.name} entf={pool.entf} expanded={pool.name == this.state.activeCard} />
        );
    }.bind(this));

    return (<ul>
            {pools}
    </ul>
    )
},

handleClick: function (value) {
    this.setState({ activeCard: value })
}
});