Question

我正在尝试遍历一组输入，并使用style.setProperty使它们的颜色值为特定CSS变量的值。每个CSS变量对应于语法突出显示的一部分。

示例：--function-color: #DD4A68是代码块/降价中为功能设置的颜色。

我将其设置为在输入更改时动态地执行此操作，但是结果是整个代码预览容器都使用选定的颜色着色，而不是单独的代码段。

更改任何值之前

更改“关键字颜色”值后。

代码示例中的关键字颜色应该是唯一更改的内容。

这里是code sandbox，以使您感觉更好。

拾色器组件

function ColorPickerSection() {
  const [colorVal, setColorVal] = useState(colors)

  const handleInputChange = () => {
    const inputs = document.querySelectorAll('input');
    inputs.forEach(input => {
      input.addEventListener('change', getInputVal)
    })
  }

  const getInputVal = (e) => {
    for (let option of Object.keys(colors)) {
      const root = document.querySelector(':root')
      root.style.setProperty(`--${option}`, e.target.value);
    }
  }

  const onColorChange = (e, colorValKey) => {
    setColorVal({
      ...colors,
      [colorValKey]: e.target.value
    })
    handleInputChange()
  }

  return (
    <div>
      {Object.keys(colorSelect).map(groupName => {
        return (<div key={groupName}>
          <GroupName>{groupName}</GroupName>
          {Object.keys(colorSelect[groupName]).map(color => {
            return (
              <ColorPicker
                id={color}
                key={color}
                label={color}
                value={colorVal[color]}
                onChange={(e) => onColorChange(e, color)}
              />
            )
          })}
        </div>)
      })}
    </div>
  )
}

export default ColorPickerSection

存储所有颜色和属性名称的帮助对象

const colorSelect = {
  'Line Highlights': {
    'highlight-background': '#F7EBC6',
    'highlight-accent': '#F7D87C'
  },
  'Inline Code': {
    'inline-code-color': '#DB4C69',
    'inline-code-background': '#F9F2F4'
  },
  'Code Blocks': {
    'block-background': '#F8F5EC',
    'base-color': '#5C6E74',
    'selected-color': '#b3d4fc'
  },
  'Tokens': {
    'comment-color': '#93A1A1',
    'punctuation-color': '#999999',
    'property-color': '#990055',
    'selector-color': '#669900',
    'operator-color': '#a67f59',
    'operator-background': '#FFFFFF',
    'variable-color': '#ee9900',
    'function-color': '#DD4A68',
    'keyword-color': '#0077aa'
  }
}

const colorNames = []
const colors = {}

Object.keys(colorSelect).map(key => {
  const group = colorSelect[key]
  Object.keys(group).map(color => {
    colorNames.push(color)
    colors[color] = group[color]
  })
})

export { colorSelect, colorNames, colors }

Answer 1

在ColorPicker组件中->将onColorChange更改为onChange，因为在传递道具时已经将功能分配给onChange。

return (
    <ColorPickerContainer>
      <p>{props.label}</p>
      <ColorSwatch type="color" value={props.value} onChange={props.onChange} />
      <HexInput
        type="text"
        value={props.value}
        onChange={props.onChange}
      />
    </ColorPickerContainer>
  );

代替

   <ColorSwatch type="color" value={props.value} onChange={props.onColorChange} />
      <HexInput
        type="text"
        value={props.value}
        onChange={props.onColorChange}
      />

各个输入值不会改变

1 个答案: