[英]how to trigger re-render of rating component
I am trying out React for first time.我是第一次尝试 React。 I have taken a problem to try building a 5-star rating component.
我遇到了一个问题,试图构建一个 5 星评级组件。 It prints all logs properly.
它正确打印所有日志。 Just that the component is not re-rendering when state is changed.
只是当 state 更改时组件不会重新渲染。 Appreciate your time reading this.
感谢您花时间阅读本文。 Here is JSFiddle version of the problem.
这是问题的 JSFiddle 版本。
HTML: HTML:
<div id="app"></div>
CSS: CSS:
span {
margin: 10px;
font-size:25px;
}
span.active {
color:red;
}
JS: JS:
class RatingApp extends React.Component {
constructor(props) {
super(props)
this.state = {
rating : 0,
items: [
{id:1, active: false },
{id:2, active: false },
{id:3, active: false },
{id:4, active: false },
{id:5, active: false }
]
}
}
toggleClass(itemId) {
console.log("itemId ----" + itemId);
var changedItems = this.state.items;
console.log("id ----" + changedItems[itemId-1].id);
console.log("active ----" + changedItems[itemId-1].active);
console.log("pre changedItems ---- " + changedItems);
for(var i=1; i<=5; i++) {
if(i<=itemId) {
changedItems[i-1].active = true;
console.log("active class added");
}
else {
changedItems[i-1].active = false;
}
}
console.log("post changedItems ---- " + changedItems);
this.setState=({
rating: itemId,
items: changedItems
});
};
render() {
return (
<div id="rating">
{this.state.items.map(item => (
<span key={item.id} className={item.active ? "active" : ""}
onClick={() => this.toggleClass(item.id)}
>
*
</span>
))}
</div>
)
}
}
ReactDOM.render(<RatingApp />, document.querySelector("#app"))
The first issue is this part第一个问题是这部分
this.setState=({
rating: itemId,
items: changedItems
});
it should be它应该是
this.setState({
rating: itemId,
items: changedItems
});
The error is in错误在
this.setState=({ rating: itemId, items: changedItems }) this.setState=({ rating: itemId, items: changedItems })
change it to this.setState({ rating: itemId, items: changedItems })将其更改为 this.setState({ rating: itemId, items: changedItems })
Refer below请参阅下文
class RatingApp extends React.Component { constructor(props) { super(props) this.state = { rating: 0, items: [ {id:1, active: false }, {id:2, active: false }, {id:3, active: false }, {id:4, active: false }, {id:5, active: false } ] } } toggleClass(itemId) { console.log("itemId ----" + itemId); var changedItems = this.state.items; console.log("id ----" + changedItems[itemId-1].id); console.log("active ----" + changedItems[itemId-1].active); console.log("pre changedItems ---- " + changedItems); for(var i=1; i<=5; i++) { if(i<=itemId) { changedItems[i-1].active = true; console.log("active class added"); } else { changedItems[i-1].active = false; } } console.log("post changedItems ---- " + changedItems); /* this.setState=({ rating: itemId, items: changedItems }); */ this.setState({ rating: itemId, items: changedItems }); }; render() { return ( <div id="rating"> {this.state.items.map(item => ( <span key={item.id} className={item.active? "active": ""} onClick={() => this.toggleClass(item.id)} > * </span> ))} </div> ) } } ReactDOM.render(<RatingApp />, document.querySelector("#app"))
span { margin: 10px; font-size:25px; } span.active { color:red; }
<:doctype html> <html lang="en"> <head> <meta charset="utf-8"> <script src="https.//cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> </head> <body> <div id="app"></div> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.