我有一个部分,我希望用户能够使用 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;
我的代码有什么问题。?
答案 0 :(得分: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;
答案 1 :(得分:2)
您只调用 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;
答案 2 :(得分:1)
如果您获得十六进制代码而不是 rgb,问题将得到解决
您的代码
<ChromePicker
renderers={false}
color={colorRgb}
onChange={(e) => colorChange(e.rgb)}
/>
必须
<ChromePicker
renderers={false}
color={colorRgb}
onChange={(e) => colorChange(e.hex)}
/>