反应就像地图的按钮。 json资料

Question

是的你好，

我该如何为like button做点赞like button ？

http://jsfiddle.net/2nq3joy6/

我以为id可以通过地图做到。 到{this.state.count}即 像{l.this.state.count}在这种情况下，就像其他项目一样，但是没有。

/** @jsx React.DOM */

// Let's create a "real-time search" component

var SearchExample = React.createClass({

    getInitialState: function(){
        return { 
            searchString: '',
            count: 0
        };
    },

    incrementCount: function() {
        this.setState({
            count: this.state.count + 1
        });
    },


    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 x</p>
            <button className="btn btn-primary" onClick={this.incrementCount}>like</button> 

            </div>
        })}

        </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')
    );

Answer 1

有几种方法可以实现您想要的。 在下面的示例中，我选择增加原始libraries变量的like计数，然后再forceUpdate 。 如果您遵循的是磁通量体系结构，则可能需要执行一个增量操作来执行此操作，该操作将更新LibraryStore，然后导致更改事件。

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

前进的方式可能取决于您将要增加的计数（计数）接下来要做什么。

前面已经说过，这是一个工作示例，其中每次单击按钮时计数都会增加：

jsFiddle： 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')
);

Answer 2

那是你的意思吗？

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

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