Reactjs onClick事件如何从列表中选择特定按钮答案

【问题标题】：Reactjs onClick event how to select a specific button from a listReactjs onClick事件如何从列表中选择特定按钮
【发布时间】：2014-12-16 19:14:19
【问题描述】：

var RoomList = React.createClass({
    getInitialState: function() {
        return { liked: false };
    }, 
    handleClick: function(event) {
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        var text = this.state.liked ? 'empty' : 'full';
        var inOffice = this.props.data.map((function(comment, index) {
            return(       
                <button type='button' key={index}  className ={text} onClick={this.handleClick}> 
                {comment.room}  
                </button>
            );
        }).bind(this));
        return (
            <ul className='rooms'>{inOffice}</ul>
        );
    }
});

问题：这只是我的代码的一部分...我加载了一个包含 5 个值对的列表：{"room":101},{room:102}...我为每个值创建了一个按钮。当我单击一个按钮时，它应该将颜色从红色变为绿色或从绿色变为红色，但是，它会更改所有按钮。如何仅更改一个按钮的颜色？

【问题讨论】：

react - idiomatic way to remove child 的可能重复项
@FakeRainBrigand 组件结构看起来有点相似，但这个问题解决了不同的问题。
@daniula 在某处有更准确的重复，但我无法找到它（使用基于索引的点击事件更新状态数组中的值），删除示例刚刚结束在它如何修改数组。无论如何，如果这只是 UI 状态，您的答案就是正确的解决方案。
@Brian Smith 您是否需要每个房间都有自己的喜欢/不喜欢状态，还是希望一次只喜欢一个房间？

标签： reactjs

【解决方案1】：

将按钮创建为单独的 React 组件并在它们之间隔离处理 onClick。 RoomList 变成了 RoomElement 组件的简单列表。

var RoomElement = React.createClass({
    getInitialState: function() {
        return { liked: false };
    },
    handleClick: function(event) {
        this.setState({liked: !this.state.liked});
    },
    render: function() {
        return (
            <button type="button" key={index} className={ this.state.liked ? 'empty' : 'full' } onClick={this.handleClick}> 
            {this.props.text}  
            </button>
        );
    }
});

var RoomList = React.createClass({
    render: function() {
        return (
            <ul className="rooms">
            {this.props.data.map(function(comment, index) {
                return <RoomElement key={index} text={comment.room} />
            }, this) }
            </ul>
        );
    }
});

【讨论】：

孩子持有状态而不是父母持有状态不是问题吗？
好点，最好在 RoomList 中保留一个状态并通过 props 将值传递给 RoomElement，这就是像 Redux 这样的框架处理它的方式。但是，这与所描述的问题无关。