使用反应颜色选择器更改背景颜色

Question

我有一个部分，我希望用户能够使用 react 颜色选择器和 react-redux 更改背景颜色，不幸的是，背景颜色没有改变/没有更新为新颜色。

codesandbox 中的实时代码：change background color

源代码：

  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

您只调用updateColor 函数，该函数在组件挂载时调用dispatch 一次。这没有任何意义，因为您的 redux 值将始终为黑色。

如果您想在组件中存储“待定”更改，那么您将使用本地组件状态并在单击“提交”按钮时调用 dispatch。

可能您想在每次更改时调用 dispatch 并摆脱本地的 useState。

@ibra 关于需要将颜色对象格式化为字符串是正确的，但您可以更简洁地编写它。

您是想在存储到 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 2

你只需要在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 3

如果你得到的是十六进制代码而不是 rgb，问题就会得到解决

您的代码

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

必须

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