像地图按钮一样做出反应。 json 数据

Question

是的你好，

如何为这样的东西制作 like button？

我认为我可以通过地图做到这一点。到 {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 变量和 forceUpdate 之后的喜欢计数。如果您遵循通量架构，您可能会使用增量操作来更新 LibraryStore，然后引发更改事件。

您还可以选择为 library 项创建一个新组件，并像评论者所说的那样将其状态保持在 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

你的意思是that吗？

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

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

像地图按钮一样做出反应。 json 数据

react like button for map. json data

javascript

reactjs