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

如何解决使用反应颜色选择器更改背景颜色

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

代码沙盒中的实时代码：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;

我的代码有什么问题。？

解决方法

您只需要在 rgba(r,g,b,a) 的语法中设置背景而不是 {r,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;

,

您只调用 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,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;

,

如果您获得十六进制代码而不是 rgb，问题将得到解决

您的代码

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

必须

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