像地图按钮一样反应.JSON 数据

有几种方法可以实现您想要的内容。在下面的示例中，我选择在原始libraries变量上递增 likecount 并在之后forceUpdate。如果您遵循通量架构，则可能会使用增量操作来执行此操作，该操作将更新 LibraryStore，然后导致更改事件。

您还可以选择为library项创建一个新组件，并按照评论者所说like在其状态的属性中保留 likecount。

走的路可能取决于你接下来要做什么，你拥有的递增的喜欢计数。

话虽如此，这是一个工作示例，其中每次单击按钮时计数都会增加：

js小提琴 ：http://jsfiddle.net/bftxz5n1/

/** @jsx React.DOM */
// Let's create a "real-time search" component
var SearchExample = React.createClass({
    getInitialState: function(){
        return { 
            searchString: '',
            count: 0
        };
    },
    incrementCount: function(l) {
        l.likes = l.likes + 1;
        this.forceUpdate();
    },

    handleChange: function(e){
        // With setState the current and previous states are merged.
        this.setState({
            searchString:e.target.value
        });
    },
    render: function() {
        var libraries = this.props.items,
        searchString = this.state.searchString.trim().toLowerCase();
        if(searchString.length > 0){
            console.log('searching');
            // We are searching. Filter the results.
            libraries = libraries.filter(function(l){
                return l.name.toLowerCase().match( searchString );
            });
        }
        return <div>
                    <input type="text" className="form-control" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
                    <div className="row"> 
                        { libraries.map(function(l){
                            return <div className="col-xs-4 text-center">
                                <h5>{l.name} </h5> 
                                <img src="http://placehold.it/350x150" className="img-responsive" />
                                <a href={l.url}>{l.url}</a> 
                                <p>likes {l.likes}</p>
                                <button className="btn btn-primary" onClick={this.incrementCount.bind(this,l)}>like</button> 
                            </div>
                        }.bind(this))}
                    </div>
                </div>;
    } // render end
});

var libraries = [
    { name: 'Backbone.js', likes: 3, comments: 5, url: 'http://documentcloud.github.io/backbone/'},
    { name: 'AngularJS', likes: 3, comments: 5, url: 'https://angularjs.org/'},
    { name: 'jQuery', likes: 3, comments: 5, url: 'http://jquery.com/'},
    { name: 'Prototype', likes: 3, comments: 5, url: 'http://www.prototypejs.org/'},
    { name: 'React', likes: 3, comments: 5, url: 'http://facebook.github.io/react/'},
    { name: 'Ember', likes: 3, comments: 5, url: 'http://emberjs.com/'},
    { name: 'Knockout.js', likes: 3, comments: 5,  url: 'http://knockoutjs.com/'},
    { name: 'Dojo', likes: 3, comments: 5, url: 'http://dojotoolkit.org/'},
    { name: 'Mootools', likes: 3, comments: 5, url: 'http://mootools.net/'},
    { name: 'Underscore', likes: 3, comments: 5, url: 'http://documentcloud.github.io/underscore/'},
    { name: 'Lodash', likes: 3, comments: 5, url: 'http://lodash.com/'},
    { name: 'Moment', likes: 3, comments: 5, url: 'http://momentjs.com/'},
    { name: 'Express', likes: 3, comments: 5, url: 'http://expressjs.com/'},
    { name: 'Koa', likes: 3, comments: 5, url: 'http://koajs.com/'},
];
// Render the SearchExample component on the page
React.renderComponent(
    <SearchExample items={ libraries } />,
    document.getElementById('content')
);

这是你的意思吗？

如果我是对的，您必须将计数移动到库本身，理想情况下它应该是另一个组件，但为了避免过多地更改代码，我只是将喜欢的库的索引绑定到 incrementCount 方法并使用它来检索接收类似内容的库。

顺便说一句，搜索仍然被破坏，如果库是可变的，它应该处于该状态，否则无法incrementCount方法上检索正确的库。