使用语义ui捕捉图标值、更改值和颜色的反应

Question

使用语义ui，在父组件初始化道具：isFavorite=false点击图标后无法捕捉到值，我如何填充星星以区分颜色(通过添加属性？styleColor={isFavorite : color:"red" : color:"white"})

component.jsconst ProductDetails=((=>｛

const {productId} = useParams()

const selectedProd = useSelector((state) => state.allProducts.products.find(product => 
product.id === parseInt(productId)
));
const products = useSelector((state) => state.allProducts.products)


let {isFavorite} = selectedProd 


const handleFavoriteSelect =(e)=>{
isFavorite = !isFavorite
selectedProd.isFavorite=isFavorite  
dispatch(updateProducts(products,selectedProd))            
}
return(
<i onClick={e => handleFavoriteSelect(e)} className="right floated star outline icon" onChange={e=> console.log(!e.target.attributes.value)} value={isFavorite}></i>
)

redux/action.js

export const updateProducts = (products,product) => {
const indexOfItem = products.findIndex(q => q.id === product.id);
if (indexOfItem > -1) {
products[indexOfItem] = product;
}
return {
type: ActionTypes.SET_PRODUCTS,
payload: products
};
};

redux/reducer.js

export const productReducer = (state = initialState, { type, payload }) => {

switch (type) {
case ActionTypes.SET_PRODUCTS:
//take state and update this with payload data
return {...state,products:payload};
default:
return state;
}
}

redux/reducer/index.js

import { combineReducers } from 'redux'
import { productReducer,selectedProductReducer } from './productReducer'
const reducers = combineReducers({
allProducts: productReducer,
product:selectedProductReducer
})
export default reducers

Answer 1

尝试以下操作：

style={isFavorite?{color:"red"}:{color:"white"}}

我建议对更改产品进行编辑，因为你目前正在改变状态，就像你从未读过一行关于redux或react的文档一样：

//toggleFavorite would be much more descriptive
const handleFavoriteSelect =(e)=>{
dispatch(updateProducts(products,{
...selectedProd,
isFavorite:!selectedProd.isFavorite
}))   
}
export const updateProducts = (products, product) => {
return {
type: ActionTypes.SET_PRODUCTS,
payload: products.map(
(currentProduct) =>
currentProduct.id === product,id
? product //return changed product
: currentProduct //return original product
),
};
};

这仍然给您的组件和操作创建者留下了太多的逻辑，最好定义一个以id为有效负载的TOGGLE_FAVORITE操作类型，并让reducer处理切换收藏夹的逻辑。