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

Question

yes hello,

how do I make a like button for something like this?

http://jsfiddle.net/2nq3joy6/

i thought id be able to do it by map. to {this.state.count} ie. like {l.this.state.count} in this case as like the other items, but no.

/** @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

There are a few ways to implement what you want. In the following example I chose to increment the like count on the original libraries variable and forceUpdate afterwards. If you were following flux architecture, you would probably do that with an increment action that would update LibraryStore and then cause a change event.

You could also chose to create a new component for library items and hold like count in like property of its state as the commenters say.

The way to go probably depends on what will you do next with the incremented like count you have.

Having said that here is a working example where count is incremented on each button click:

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

Is that what you mean?

In case I'm right, you have to move the count to the library itself, ideally it should be another component, but to avoid changing your code too much I just bound the index of the library being liked to the incrementCount method and used it to retrieve the library receiving the like.

BTW, the search is still broken, if libraries is mutable, it should be in the state, otherwise there is no way retrieve the right library on incrementCount method.