如何在点击时更改 Material UI 导入的图标

Question

我正在使用 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 的新手

Answer 1

您可以使用一块 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 中。