javascript - 如何在点击时更改 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的新手

标签： javascriptreactjsreduxmaterial-ui

Answer 1

您可以使用一个状态、一个更改状态的单击处理程序和条件渲染来执行此操作。在下面的片段中，我使用“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 中卸载时出现的图标，你可以将状态保存在你的 redux 存储中，而不是本地保存在组件状态中。