Question

我有一个反应颜色选择器，我用它来创建自定义的 16 色渐变。我使用下拉菜单选择要编辑的颜色，然后使用颜色选择器选择颜色。这将编辑一个数组，该数组被调用以设置下拉列表的每个框的样式。我的最终目标是将下拉列表中每个条目的背景更改为渐变中的相应颜色。

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>
)
}

我也像这样在我的 getElementByID 函数中尝试过 ChangeCustomGradientColor

function ChangeCustomGradientColor(eventKey, color) {
  let elementID = "cust" + eventKey;
  document.getElementByID(elementID).style.backgroundColor = color;
}

我一直在复制/粘贴和学习，但现在我只需要坐下来学习完整的 JS 课程，然后再继续学习。任何帮助或建议表示赞赏。

Answer 1

gradientColors 正在通过引用而不是状态进行变异，因此您的 Dropdown.Item 组件变得陈旧，它们永远不知道何时重新渲染。要解决这个问题，您只需将 gradientColors 带入带有 useState 的状态。这是一个 codesandebox 示例。

而不是变异

  initialGradientColors[eventKey] = color.hex;

您需要通过 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;
 }))

使用颜色选择器更改 React 中下拉项的颜色

1 个答案: