大佬教程收集整理的这篇文章主要介绍了如何使用语义 ui react 捕获图标值、更改值和颜色，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
使用语义ui，
在父组件初始化道具：isFavorite = false
单击图标后无法捕获值，我如何将星形填充为不同的颜色（通过添加属性？
stylecolor={isFavorite : color:"red" : color:"white"
})
component.Js const ProductDetails = () => {
@H_404_8@ 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
@H_404_8@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
@H_404_8@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
@H_404_8@import { combineReducers } from 'redux'
import { productReducer,selectedProductReducer } from './productReducer'
const reducers = combineReducers({
allProducts: productReducer,product:selectedProductReducer
})
export default reducers
尝试以下操作：
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 react 捕获图标值、更改值和颜色全部内容，希望文章能够帮你解决如何使用语义 ui react 捕获图标值、更改值和颜色所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。