反應就像地圖的按鈕。 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方法檢索正確的庫。