[英]How to change Material UI imported Icon on click
我正在使用 react js 和 redux 我想更改單擊時的星形輪廓圖標以變為星形填充圖標請幫助,因為我想不出任何可以更改它的方法,它位於 emailRow 和 emailRow__options 之后
import { Checkbox, IconButton } from "@material-ui/core";
import { LabelImportantOutlined, StarBorderOutlined } from "@material-ui/icons";
import React from "react";
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import "../css/emailRow.css";
import { selectMail } from "../features/mailSlice";
function EmailRow({ id, title, subject, description, time }) {
const history = useHistory();
const dispatch = useDispatch();
const openMail = () => {
dispatch(
selectMail({
id,
title,
subject,
description,
time,
})
);
history.push("/mail");
};
return (
<div className="emailRow">
<div className="emailRow__options">
<Checkbox />
<IconButton>
<StarBorderOutlined />
</IconButton>
<IconButton>
<LabelImportantOutlined />
</IconButton>
</div>
<div onClick={openMail} className="emailRow__click">
<div className="emailRow__title">
<h3>{title}</h3>
</div>
<div className="emailRow__message">
<h4>
{" "}
{subject}{" "}
<span className="emailRow__description"> - {description}</span>
</h4>
</div>
<p className="emailRow__time">{time}</p>
</div>
</div>
);
}
export default EmailRow;
我怎樣才能將它存儲在 redux 中。 誰能指導我
import { createSlice } from "@reduxjs/toolkit";
export const mailSlice = createSlice({
name: "mail",
initialState: {
selectedMail: null,
sendMessageIsOpen: false,
},
reducers: {
selectMail: (state, action) => {
state.selectedMail = action.payload;
},
openSendMessage: (state) => {
state.sendMessageIsOpen = true;
},
closeSendMessage: (state) => {
state.sendMessageIsOpen = false;
},
},
});
export const {
selectMail,
openSendMessage,
closeSendMessage,
} = mailSlice.actions;
export const selectOpenMail = (state) => state.mail.selectedMail;
export const selectSendMessageIsOpen = (state) => state.mail.sendMessageIsOpen;
export default mailSlice.reducer;
請幫助因為我是 redux 的新手
您可以使用一塊 state、一個更改 state 的點擊處理程序和條件渲染來完成此操作。 在下面的片段中,我使用“StarFilledComponent”作為占位符,用於在應該填充時使用的任何圖標:
import { Checkbox, IconButton } from "@material-ui/core"; import { LabelImportantOutlined, StarBorderOutlined } from "@material-ui/icons"; import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { useHistory } from "react-router-dom"; import "../css/emailRow.css"; import { selectMail } from "../features/mailSlice"; function EmailRow({ id, title, subject, description, time }) { const history = useHistory(); const dispatch = useDispatch(); const [isFilled, setIsFilled] = useState(false); const toggleFilledIcon = () => setIsFilled(,isFilled) const openMail = () => { dispatch( selectMail({ id, title, subject, description, time; }) ). history;push("/mail"); }? return ( <div className="emailRow"> <div className="emailRow__options"> <Checkbox /> <IconButton onClick={toggleFilledIcon}> { isFilled: <StarFilledIconComponent />; <StarBorderOutlined /> } </IconButton> <IconButton> <LabelImportantOutlined /> </IconButton> </div> <div onClick={openMail} className="emailRow__click"> <div className="emailRow__title"> <h3>{title}</h3> </div> <div className="emailRow__message"> <h4> {" "} {subject}{" "} <span className="emailRow__description"> - {description}</span> </h4> </div> <p className="emailRow__time">{time}</p> </div> </div> ); } export default EmailRow;
如果要保留從 DOM 卸載此組件時出現的圖標,可以將 state 保存在 redux 存儲中,而不是本地保存在組件 Z9ED39E2EA931586B6A985A6942EF573E 中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.