Javascript React组件中的输入值为只读

我有多个颜色输入，以独特的颜色显示。它们是从嵌套对象的辅助对象中获取其值。当我尝试更新该值时，什么也没有发生。我的最终目标是更改颜色输入，并将所述颜色应用于css变量，以改变特定语法的高亮颜色

下面是该项目的示例。

ColorPicker.js-在两个位置更改ColorSwatch和HexInput组件

从

到

完整的ColorPicker.js

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

---

只需做以下更改：

在ColorPickerSection.jsx中

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

  const onColorChange = (e, colorValKey) => {
    setColorVal({
      ...colors,
      [colorValKey]: 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]}
                  onColorChange={e => onColorChange(e, color)}
                />
              );
            })}
          </div>
        );
      })}
    </div>
  );
}

在ColorPicker.jsx中

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

检查这里

按如下方式更改HexInput Onchange方法：

          onChange={ e => props.onChange(e, props.label)}

像这样更改颜色选择器道具

         <ColorPicker
              key={color}
              label={color}
              value={colorVal[color]}
              onChange={onColorChange}
            />

---

请不要只是链接到您的代码。尝试将解决问题所需的部分直接嵌入问题中。关于如何改进这个问题的更多信息可以在文章中找到。

          onChange={ e => props.onChange(e, props.label)}

         <ColorPicker
              key={color}
              label={color}
              value={colorVal[color]}
              onChange={onColorChange}
            />