Javascript 将设置状态反应到项目范围
我正在尝试学习React并构建一个简单的应用程序,该应用程序来自RedditAPI。我现在要做的是添加一个虚拟的星形按钮,它一开始是空的,有一个边框,点击时就会被填充,就像用户能够喜欢帖子一样。我最初将start的状态设置为false,当用户单击start时,状态设置为true,并切换星形的样式。我现在的问题是,当它被点击时,它正在做我想要它做的事情,但它正在改变每一篇文章的明星风格,而不仅仅是它被点击的一篇文章。所以我要做的是将状态保持在post项的作用域中,该post项是在单击星时显示的。这就是我的代码当前的样子:Javascript 将设置状态反应到项目范围,javascript,reactjs,font-awesome,Javascript,Reactjs,Font Awesome,我正在尝试学习React并构建一个简单的应用程序,该应用程序来自RedditAPI。我现在要做的是添加一个虚拟的星形按钮,它一开始是空的,有一个边框,点击时就会被填充,就像用户能够喜欢帖子一样。我最初将start的状态设置为false,当用户单击start时,状态设置为true,并切换星形的样式。我现在的问题是,当它被点击时,它正在做我想要它做的事情,但它正在改变每一篇文章的明星风格,而不仅仅是它被点击的一篇文章。所以我要做的是将状态保持在post项的作用域中,该post项是在单击星时显示的。这
import React, { Component } from 'react';
import './Card.css';
import axios from 'axios';
import SortControls from './SortControls/SortControls';
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons';
import { faStar as faStarSolid } from '@fortawesome/free-solid-svg-icons';
library.add(
faStarRegular,
faStarSolid
)
class Card extends React.Component {
state = {
news: [],
starActive: false,
};
componentDidMount() {
axios.get(`https://www.reddit.com/r/funny/hot.json`).then(res => {
console.log(res);
this.setState({news: res.data.data.children});
})
}
render() {
return (
<div className="container">
<SortControls />
<div className="cards">
{this.state.news.map((newsItems, i) =>
<div key={newsItems.data.id} className="card">
<div className="cardHead"><h3>{newsItems.data.title}</h3></div>
<div className="cardFooter">
<div className="cardFooter__container">
<a href="#">View</a>
<FontAwesomeIcon onClick={() => this.setState({starActive: !this.state.starActive})} icon={ this.state.starActive ? ['fas', 'star'] : ['far', 'star'] } />
</div>
</div>
</div>)}
</div>
</div>
)
}
}
export default Card;
您可以在FontAwesomeIcon组件上看到我的onClick和样式更改
那么,我是否设置错误以保持状态在范围内,或者单击时一次只更新一个星号,我缺少了什么?两种可能的方法: *我更喜欢第二个,因为当你点击一个项目时,它不会重新显示整个新闻列表 1.当您单击以使单击的新闻项ID保持在状态时。
我更喜欢第二种方法来保持状态分离有些方法工作得很好!我选择了选项2,以使事情更加分离。谢谢你的帮助!
this.toggleId(id) {
const { activeIds } = this.state
if (activeIds.includes(activeIds)) {
return this.setState({ activeIds: activeIds.filter(i => i !== id) })
}
this.setState({ activeIds: [...activeIds, id] })
}
// Render method ...
const { activeIds } = this.state
<FontAwesomeIcon
onClick={() => this.toggleId(newsItems.data.id)}
icon={ activeIds.includes(newsItems.data.id) ? ['fas', 'star'] : ['far', 'star'] } />
// Cards render
<div className="cards">
{ this.state.news.map((newsItem, i) => (
<NewsItem {...newsItem} key={newsItem.data.id} />
))}
</div>
// NewsItem
class NewsItem extends React.Component {
state = {
starActive: false,
}
render() {
const { data } = this.props
return <div key={data.id} className="card">
<div className="cardHead"><h3>{data.title}</h3></div>
<div className="cardFooter">
<div className="cardFooter__container">
<a href="#">View</a>
<FontAwesomeIcon
onClick={() => this.setState({
starActive: !this.state.starActive
})}
icon={ this.state.starActive ? ['fas', 'star'] : ['far', 'star'] } />
</div>
</div>
</div>
</div>
}
}