在click react.js上切换列表的背景颜色

Question

我正在尝试创建一个具有以下功能的列表.

1. 在悬停时更改listItem的背景颜色.
2. 单击更改listItem的背景颜色.
3. 在点击的元素之间切换背景颜色.[即列表中只有一个元素可以点击属性]

我已经执行了onhover 1和2功能,但我无法实现第3个功能.请帮我解决这个问题.

提前致谢.

/** @jsx React.DOM */

   'use strict'

    var React = require('react')


    var ListItem = React.createClass({

        getInitialState: function() {
            return  {hover_flag: false, click_flag: false}
        },

        hoverEvent: function() {
            this.setState({hover_flag: !this.state.hover_flag})
        },

        clickEvent: function(){
            this.setState({click_flag: true})
        },

        render: function() {
            var liStyle = {
                /* some more class properties */
                background: '#cc181e',
            }

            if(this.state.hover_flag || this.state.click_flag) {
                liStyle['background'] = '#880000'
            }

            if(this.state.click_flag) {
                liStyle['background'] = '#880000'           
            }

            return (
                <li onClick={this.clickEvent} onMouseEnter={this.hoverEvent} onMouseLeave={this.hoverEvent} style={liStyle} key={this.props.name}>{this.props.name}</li>
            )
        }

    })


    module.exports = React.createClass({

        render: function() {

            var ulStyle = {
                padding: '0px',
                margin: '20px',
            }

            var link = {
                textDecoration: 'none',
                color: 'white',
                cursor: 'pointer'       
            }


            var list = this.props.data.map(function(data) {
                /*List of li elements */
                return <ListItem name={data.name} />
            })

            return (

                <ul style={ulStyle}>
                    {list}
                </ul>

            )
        }

    });

Answer 1

在查看任何代码之前,请考虑问题的实际原因.在当前的实现中,每个ListItem都维护自己的click_flag状态.单击一个ListItem时,它会将自己的click_flag设置为true,但这不会触发其他ListItem将其自己的click_flag重置为false.这是问题的原因.解决方案是将click_flag作为道具从父项传递给每个ListItem.父母有责任确保只有ListItem才能将prop视为true,而其他则为false.同样,ListItem负责通过从父级传递的回调道具单击它时通知父级.

所以,ListItem看起来像:

var ListItem = React.createClass({
    propTypes: {
        onClick: React.PropTypes.func.isRequired,
        isSelected: React.PropTypes.bool
    },
    getDefaultProps: function() {
        return {
            isSelected: false
        };
    },
    getInitialState: function() {
        return {
            hover_flag: false
        };
    },
    hoverEvent: function() {
        this.setState({hover_flag: !this.state.hover_flag});
    },
    render: function() {
        var liStyle = {
            background: '#cc181e'
        };
        if (this.props.isSelected || this.state.hover_flag) {
            liStyle['background'] = '#880000';
        }
        return (
            <li
                onClick={this.props.onClick}
                onMouseEnter={this.hoverEvent}
                onMouseLeave={this.hoverEvent}
                style={liStyle}>{this.props.name}
            </li>
        );
    }
});

并且,父母可能看起来像这样:

module.exports = React.createClass({
    getInitialState: function() {
        return {
            selectedItem: null
        };
    },
    clickHandler: function(idx) {
        this.setState({selectedItem: idx});
    },
    render: function() {
        var ulStyle = {
            padding: '0px',
            margin: '20px'
        };
        var items = this.props.data.map(function (item, idx) {
            var is_selected = this.state.selectedItem == idx;
            return <ListItem
                key={item.name}
                name={item.name}
                onClick={this.clickHandler.bind(this, idx)}
                isSelected={is_selected}
                />;
        }.bind(this));
        return (
            <ul style={ulStyle}>
                {items}
            </ul>
        );
    }
});

父级维护状态变量,该变量存储哪个ListItem是当前选定的ListItem.它在render()中使用此状态将is_selected = true传递给一个ListItem,并将所有其他传递给false.父对象的状态由clickHandler更新,clickHandler作为props传递给每个ListItem.请参见示例小提琴