Question

所以我正在尝试使用React创建可扩展的卡组件。我把它设置如下。它现在都可以工作，我可以点击一张卡片来展开它，然后再点击它就可以折叠它。每张卡都有自己的状态变量'expanded'

var ExpandableListItem = React.createClass({
toggleCard: function(){
    var self = this
    this.setState({
        expanded: !self.state.expanded
    })
},

getInitialState: function(){
    return {
        expanded: false
    }
},

render: function(){
    return (
        <Card onTouchTap={this.toggleCard}>
            <CardText>
                {this.state.expanded ? 'Expanded Card' : 'Normal Card'}
            </CardText>
        </Card>
    )
}
})

var CardList = React.createClass({
render: function(){
    return (
        <div>
            {this.props.repeatEntity.map(function(element, index) {
                return (
                    <ExpandableListItem text={element[index].week}></ExpandableListItem>
                )}
            )}
        </div>
    )
}
})

我想要的是，一次只打开一张卡片，也就是说，如果一张卡片处于打开状态而您点击另一张卡片，则第一张卡片必须关闭。

我尝试过使用全局'扩展'变量来处理这个问题，但是状态变量不是双向绑定的（如Angular中），所以我不能将一个卡的状态值改为另一个。

有人可以帮忙吗？感谢。

Answer 1

解决方案：让父组件处理所有展开状态。

如何？在您的父组件（expanded）中保存CardList状态foreach项。您可以将状态保存在与repeatEntity长度相同的单独数组中，并将它们映射，例如将索引映射到正确的实体。

array = [true, false, false]; // [0. expanded state, 1. ..., 2. ...]
entities = [{...}, {...}, {...}]; // [0. entity, 1. ..., 2. ...]

或者，您可以为每个expanded添加变量entity。接下来，您必须实现一个回调函数，该函数将必要的信息识别为切换的entity作为参数。这将是索引或entity对象本身。然后，回调函数可以更改传递的expanded的匹配entity状态。

handleCardItemToggle(entityIndex) {
    const expandedStates = this.state.entityStates;

    // set all values to 'false'

    expandedStates[entityIndex] = !expandedStates[entityIndex]; // toggle expanded-state of item

    this.setState({
        entityStates: expandedStates
    });
}

至少你必须将回调和索引传递给所有项目。

render: function(){
    return (
        <div>
            {this.props.repeatEntity.map(function(element, index) {
                return (
                    <ExpandableListItem id={index} isExpanded={this.state.entityStates[index]} handleToggle={this.handleCardItemToggle} text={element[index].week}></ExpandableListItem>
                )}
            )}
        </div>
    )
}


// in ExpandableListItem
toggleCard() {
    this.props.handleToggle(this.props.id);
}

注意：可能存在一些语法或语义错误。然而，这种方法应该可以解决你的问题。

如何在React中重复元素之间共享数据？

1 个答案: