使用反應顏色選擇器更改背景顏色

Question

我有一個部分，我希望用戶能夠使用反應顏色選擇器和 react-redux 更改背景顏色，不幸的是，背景顏色沒有改變/沒有更新為新顏色。

代碼沙盒中的實時代碼： 更改背景顏色

源代碼：

  import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { ChromePicker } from "react-color";
import Details from "./Details";

const Settings = () => {
  const fields = useSelector((state) => state);
  const dispatch = useDispatch();
  const [colorRgb, setColorRgb] = useState("#000");

  useEffect(() => {
    updateColor();
  }, []);

  const updateColor = () => {
    dispatch({
      type: "change",
      name: "socialColor",
      value: colorRgb
    });
  };
  console.log("current color", colorRgb);
  console.log("current color", fields.color);
  return (
    <div>
      <div>
        <Details />
        <h1>Edit </h1>
        <div className="container">
          <ChromePicker
            renderers={false}
            color={colorRgb}
            onChange={(e) => setColorRgb(e.hex)}
          />
          <span
            className="testa"
            style={{
              background: fields.color,
              color: "#fff"
            }}
          >
            Change my background color
          </span>
        </div>
      </div>
    </div>
  );
};

export default Settings;

我的代碼有什么問題。？

Answer 1

您只需要在rgba(r, g, b, a)的語法中設置背景，而不是{r, g, b, a}這是無效的 css

import React, { useState, useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { ChromePicker } from "react-color";

const Settings = () => {
  const fields = useSelector((state) => state);
  const dispatch = useDispatch();
  const [colorRgb, setColorRgb] = useState(fields.color);

  useEffect(() => {
    updateColor();
  }, []);

  const updateColor = () => {
    dispatch({
      type: "change",
      name: "socialColor",
      value: colorRgb
    });
  };
  console.log("current color", colorRgb);
  return (
    <div>
      <div>
        <h1>Edit </h1>
        <div className="container">
          <ChromePicker
            renderers={false}
            color={colorRgb}
            onChange={(e) => setColorRgb(e.rgb)}
          />
          <span
            className="testa"
            style={{
              background:
                "rgba(" +
                colorRgb.r +
                "," +
                colorRgb.g +
                "," +
                colorRgb.b +
                "," +
                colorRgb.a +
                ")",
              color: "#fff"
            }}
          >
            Change my background color
          </span>
        </div>
      </div>
    </div>
  );
};

export default Settings;

Answer 2

您只調用updateColor function 在組件安裝時調用一次dispatch 。 這沒有任何意義，因為您的 redux 值將始終為黑色。

如果您想在組件中存儲“待定”更改，那么您將使用本地組件 state 並在單擊“提交”按鈕時調用dispatch 。

可能您想在每次更改時調用dispatch並擺脫本地useState 。

@ibra 關於需要將顏色 object 格式化為字符串是正確的，但您可以更簡潔地編寫它。

是否要在將 object 存儲到 redux 之前或在檢索它之后將其轉換為字符串，這取決於您。

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { ChromePicker } from "react-color";
import Details from "./Details";

export const rgbaString = ({r, g, b, a = 1}) => `rgba(${r},${g},${b},${a})`

const Settings = () => {
  const colorRgb = useSelector((state) => state.color);
  const dispatch = useDispatch();

  const onChangeColor = (e) => {
    dispatch({
      type: "change",
      name: "color",
      value: e.rgb
    });
  };
  
  return (
    <div>
      <div>
        <Details />
        <h1>Edit </h1>
        <div className="container">
          <ChromePicker
            renderers={false}
            color={colorRgb}
            onChange={onChangeColor}
          />
          <span
            className="testa"
            style={{
              background: rgbaString(colorRgb),
              color: "#fff"
            }}
          >
            Change my background color
          </span>
        </div>
      </div>
    </div>
  );
};

export default Settings;

Answer 3

如果您獲得十六進制代碼而不是 rgb，問題將得到解決

你的代碼

   <ChromePicker
     renderers={false}
     color={colorRgb}
     onChange={(e) => colorChange(e.rgb)}
   />

一定是

   <ChromePicker
     renderers={false}
     color={colorRgb}
     onChange={(e) => colorChange(e.hex)}
   />