有条件地呈现字体令人惊叹的图标
有条件地呈现字体令人惊叹的图标
提问于 2019-04-15 07:32:29
我目前正在映射一个数组来生成几个Font Awesome Icons。我有一个OnClick方法，我将其用作一个标志:我只想更改单击的项的图标。这是我的实现：
<FontAwesomeIcon id={i.key} onClick={this.ToggleIcon} icon={this.state.clicked ? faHeart : faCalendarAlt}/>
ToggleIcon = (e) =>{
if((this.state.clicked)){
this.setState({clicked: true})
}
else if!(this.state.clicked)){
this.setState({clicked: false})
}
}但是，这会更改所有图标，而不仅仅是单击的图标。我如何才能做到这一点呢？
回答 2
Stack Overflow用户
发布于 2019-04-15 08:22:00
您将希望跟踪状态中被单击对象的标识符，而不是简单的布尔值。
如果你一次只想“点击”一个图标：
<FontAwesomeIcon id={i.key} onClick={e => this.ToggleIcon(e, i.key)} icon={this.state.clicked === i.key ? faHeart : faCalendarAlt}/>
ToggleIcon = (e, key) =>{
this.setState(prevState => {
...prevState,
clicked: prevState.clicked === key ? null : key
});
}如果要跟踪多个图标的单击状态：
import * as R from 'ramda';
...
// Init state with empty array
state = {
clicked: [],
// ...other state in this component
}
...
<FontAwesomeIcon id={i.key} onClick={e => this.ToggleIcon(e, i.key)} icon={R.includes(i.key, this.state.clicked) ? faHeart : faCalendarAlt}/>
ToggleIcon = (e, key) =>{
this.setState(prevState => {
if (!R.includes(key, prevState.clicked)) {
return {
...prevState,
clicked: R.append(key, prevState.clicked)
};
}
return {
...prevState,
clicked: R.without(key, prevState.clicked)
};
});
}我在这里使用的是ramda，但是您可以使用您首选的方法来操作数组，而不会发生任何变化。这还假设i.key是每个图标的唯一标识符。
对于第二种情况，另一种方法是将每个图标包装在一个小组件中，该组件处理它自己的状态(看起来与您已经拥有的非常相似)，这是出于性能原因通常鼓励的做法。然而，这是否是最好的方法将取决于这些图标的用途以及它们的“已点击”状态的目的。
Stack Overflow用户
发布于 2019-04-15 08:24:49
您是否要在同一组件上呈现所有这些图标？如果是这样，那就是你的问题了。您正在更新整个组件的状态，因此状态值在整个组件中的任何位置都是相等的。那么解决方案是什么呢？对，它是给每个图标分配不同的clicked状态键/值。
数组：
class Icons extends React.Component {
constructor(props) {
super(props)
this.state = {
icons: []
}
}
toggleIcon(index, event) {
const iconState = this.state.icons[index] || {}
this.setState({
...this.state,
icons: [
...this.state.icons.slice(0, index),
{
..._currentValue,
clicked: !iconState.clicked
},
...this.state.icons.slice(index + 1)
]
})
}
render() {
return (
<div>
{ ICONS.map((item, index) => {
const iconState = this.state.icons[index] || {}
return (
<FontAwesomeIcon id={index} onClick={this.toggleIcon.bind(this, index)} icon={iconState.clicked ? faHeart : faCalendarAlt} />
)
}) }
</div>
)
}
}对象：
class Icons extends React.Component {
constructor(props) {
super(props)
this.state = {
icons: {
a: { clicked: false },
b: { clicked: false }
}
}
}
toggleIcon(key, event) {
this.setState({
...this.state,
icons: {
...this.state.icons,
[key]: {
...this.state.icons[key],
clicked: !this.state.icons[key].clicked
}
}
})
}
render() {
return (
<div>
<FontAwesomeIcon id={'a'} onClick={this.toggleIcon.bind(this, 'a')} icon={this.state.icons.a.clicked ? faHeart : faCalendarAlt} />
<FontAwesomeIcon id={'b'} onClick={this.toggleIcon.bind(this, 'b')} icon={this.state.icons.b.clicked ? 'icon 1' : 'icon 2' } />
</div>
)
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55680964
复制相关文章
相似问题