Javascript 更改React中对象的输入值

我有多个颜色输入，以独特的颜色显示。它们是从嵌套对象的辅助对象中获取其值。当我尝试更新该值时，什么也没有发生。我注销了状态，看到所有颜色仍然是一个对象。我试图获取各个颜色值，并将其用作

Object.values（）

的初始状态，但没有成功

作为测试，我创建了一个新的输入和状态，其中包含一个随机的十六进制值，并且更新后没有任何问题。我假设，因为我仍然在获取处于

colorVal

状态的对象，所以我需要以某种方式获取color对象的值并将其转换为字符串

我有点迷路了，已经为此工作了好几天了

显示输入的组件

import React, { useState } from 'react'
import ColorPicker from './ColorPicker';

import { colorSelect, colorNames, colors } from '../Theme/colorSections'
import styled from 'styled-components';

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

   const onColorChange = (e) => {
    setColorVal(e.target.value)
  }

  console.log(colorVal);

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

---

假设e.target.value确实是字符串中的新颜色代码。 “颜色”是一个开始的对象，因此当您获得新的颜色代码时，您需要相应地更新对象属性

const onColorChange=（e，colorValKey）=>{
setColorVal({
…颜色，
[colorValKey]：e.target.value
})
}
返回(
{Object.keys（colorSelect）.map（groupName=>{
返回(
{groupName}
{Object.keys（colorSelect[groupName]）.map（color=>{
返回(
变色（e，颜色）}
/>
)
})}
)
})}
)

import React from 'react';
import styled from 'styled-components'

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

const colorSelect = {
  'Line Highlights': {
    highlightBackground: '#F7EBC6',
    highlightAccent: '#F7D87C'
  },
  'Inline Code': {
    inlineCodeColor: '#DB4C69',
    inlineCodeBackground: '#F9F2F4'
  },
  'Code Blocks': {
    blockBackground: '#F8F5EC',
    baseColor: '#5C6E74',
    selectedColor: '#b3d4fc'
  },
  'Tokens': {
    commentColor: '#93A1A1',
    punctuationColor: '#999999',
    propertyColor: '#990055',
    selectorColor: '#669900',
    operatorColor: '#a67f59',
    operatorBg: '#FFFFFF',
    variableColor: '#ee9900',
    functionColor: '#DD4A68',
    keywordColor: '#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 }