是的，你好，
如何为此类内容制作like button？
我认为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')
);
答案 0 :(得分：1)
有几种方法可以实现您想要的效果。在下面的示例中，我选择在原始libraries变量和forceUpdate之后增加相似计数。如果您正在关注flux体系结构，那么您可能会使用增量操作来更新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')
);
答案 1 :(得分：-1)
that是什么意思？
如果我是对的，你必须将计数移动到库本身，理想情况下它应该是另一个组件，但为了避免过多地改变你的代码，我只是将所喜欢的库的索引绑定到{{ 1}}方法并用它来检索接收类似的库。
BTW，搜索仍然被破坏，如果库是可变的，它应该处于状态，否则就无法在incrementCount方法上检索正确的库。