[英]Change color of dropdown item in React with color picker
I have a react color picker that I am using to create a custom 16 color gradient.我有一个反应颜色选择器,用于创建自定义 16 色渐变。 I use a dropdown to select the color I want to edit and then use the color picker to pick the color.
我使用下拉菜单到 select 我要编辑的颜色,然后使用颜色选择器选择颜色。 This edits an array that is called to style each box of the dropdown.
这将编辑一个数组,该数组被调用来设置下拉菜单的每个框的样式。 My end goal is to change the background of each entry in the dropdown to the corresponding color in the gradient.
我的最终目标是将下拉列表中每个条目的背景更改为渐变中的相应颜色。
var gradientColors = ['#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000', '#000000'];
function ChangeCustomGradientColor(eventKey, color) {
gradientColors[eventKey] = color;
}
function App() {
const [color, setColor] = useState('#fff')
const [showColorPicker, setShowColorPicker] = useState(false)
const [eKey, setEventKey] = useState('');
const eventKeySelect=(e)=>{
setEventKey(e)
setShowColorPicker(showColorPicker => !showColorPicker)
}
return (
<div className="App" id="top">
<header className="App-header" id="mid">
<Dropdown onSelect={eventKeySelect}>
<Dropdown.Toggle variant="success" id="custom-color-change">
Change Custom Gradient Color
</Dropdown.Toggle>
<Dropdown.Menu >
<Dropdown.Item id="cust0" eventKey="0" style={{backgroundColor:gradientColors[0]}}>1</Dropdown.Item>
<Dropdown.Item id="cust1" eventKey="1" style={{backgroundColor:gradientColors[1]}}>2</Dropdown.Item>
<Dropdown.Item id="cust2" eventKey="2" style={{backgroundColor:gradientColors[2]}}>3</Dropdown.Item>
<Dropdown.Item id="cust3" eventKey="3" style={{backgroundColor:gradientColors[3]}}>4</Dropdown.Item>
<Dropdown.Item id="cust4" eventKey="4" style={{backgroundColor:gradientColors[4]}}>5</Dropdown.Item>
<Dropdown.Item id="cust5" eventKey="5" style={{backgroundColor:gradientColors[5]}}>6</Dropdown.Item>
<Dropdown.Item id="cust6" eventKey="6" style={{backgroundColor:gradientColors[6]}}>7</Dropdown.Item>
<Dropdown.Item id="cust7" eventKey="7" style={{backgroundColor:gradientColors[7]}}>8</Dropdown.Item>
<Dropdown.Item id="cust8" eventKey="8" style={{backgroundColor:gradientColors[8]}}>9</Dropdown.Item>
<Dropdown.Item id="cust9" eventKey="9" style={{backgroundColor:gradientColors[9]}}>10</Dropdown.Item>
<Dropdown.Item id="cust10" eventKey="10" style={{backgroundColor:gradientColors[10]}}>11</Dropdown.Item>
<Dropdown.Item id="cust11" eventKey="11" style={{backgroundColor:gradientColors[11]}}>12</Dropdown.Item>
<Dropdown.Item id="cust12" eventKey="12" style={{backgroundColor:gradientColors[12]}}>13</Dropdown.Item>
<Dropdown.Item id="cust13" eventKey="13" style={{backgroundColor:gradientColors[13]}}>14</Dropdown.Item>
<Dropdown.Item id="cust14" eventKey="14" style={{backgroundColor:gradientColors[14]}}>15</Dropdown.Item>
<Dropdown.Item id="cust15" eventKey="15" style={{backgroundColor:gradientColors[15]}}>16</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
{
showColorPicker && (
<ChromePicker
disableAlpha={true}
color={color}
onChangeComplete={updatedColor => ChangeCustomGradientColor(eKey, updatedColor)}
/>
)}
</header>
</div>
)
}
I've also tried getElementByID
in my ChangeCustomGradientColor
function like so我也试过
getElementByID
在我的ChangeCustomGradientColor
function 像这样
function ChangeCustomGradientColor(eventKey, color) {
let elementID = "cust" + eventKey;
document.getElementByID(elementID).style.backgroundColor = color;
}
I've been copying/pasting and learning but now am at the point where I just need to sit down and take a full JS class before I move on.我一直在复制/粘贴和学习,但现在我只需要坐下来拿完整的 JS class 再继续。 Any help or advice is appreciated.
任何帮助或建议表示赞赏。
The gradientColors
are being mutated by reference instead of state, so your Dropdown.Item components go stale, they never know when to re-render. gradientColors
正在通过引用而不是 state 进行变异,因此您的 Dropdown.Item 组件 go 陈旧,他们永远不知道何时重新渲染。 To fix that you just bring gradientColors
into state with a useState
.要解决这个问题,您只需使用
useState
将gradientColors
带入 state 即可。 Here's a codesandebox example.这是一个codeandebox示例。
instead of mutating而不是变异
initialGradientColors[eventKey] = color.hex;
you need to mutate via state so that it triggers the appropriate re-renders.您需要通过 state 进行变异,以便触发适当的重新渲染。
const [gradientColors, setGradientColors] = useState(initialGradientColors);
// in some callback
setGradientColors(prevGradientColors => {
const updated = prevGradientColors.map((color, index) => {
if(index === eventKey){
return newColor;
}
return color;
})
return updated;
}))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.