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

Question

使用语义 ui ，初始化父组件的道具：isFavorite = false 单击图标后无法捕获值，我如何将星号填充为不同颜色（通过添加属性？ styleColor={isFavorite : color:"red" : color:"white" })

component.js const 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 或做出反应的文档：

//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
    ),
  };
};

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

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

How catch icon value,change value and color using semantic ui react

reactjs

react-redux

semantic-ui