Javascript 反应颜色无法读取属性'；价值'；未定义的

（react中的一种新功能）我试图在项目中实现react颜色作为功能组件，但我无法更改颜色。 所有这些都显示得很好，但当我尝试更改颜色时，会出现错误：

TypeError:无法读取未定义的属性“值”

我尝试改为类组件，效果更好，但我也遇到了类似的错误。一些想法

import React from 'react';
import {FieldUpdating} from './FieldUpdating';
import {FieldUpdateError} from './FieldUpdateError';
import {ColorBox} from '../components/ColorBox';
import {ChromePicker} from 'react-color';

export function ColorEditor({label, value, setValue, updating, updateError}) {

return (
<div className="label-input mb-2 form-group">
  <label>{label}:</label>
  {value} //tried to get the value that displays as a string hex (hex string displays correct)
    <ChromePicker
      color={value}
      value={value}
      onChange={e => {
        setValue(e.target.value);
      }}
    />
  <input value={value}/>

  {updating && <FieldUpdating />}
  {updateError && <FieldUpdateError error={updateError} />}
  <ColorBox color={value} />
</div>
);
}

从“React”导入React；
从“/FieldUpdating”导入{FieldUpdating}；
从“/FieldUpdateError”导入{FieldUpdateError}；
从“../components/ColorBox”导入{ColorBox}；
从'react color'导入{ChromePicker}；
导出函数ColorEditor（{label，value，setValue，update，updateError}）{
返回(
{label}：
{value}//试图获取显示为十六进制字符串的值（十六进制字符串显示正确）
{
设定值（即目标值）；
}}
/>
{正在更新&&}
{updateError&&}
);
}

你只是做错了。显然，您正在尝试访问

e.target.value

，而

e

返回类似以下内容：

{
  "hsl": {
    "h": 0,
    "s": 0.5626318818338767,
    "l": 0.648956228956229,
    "a": 1
  },
  "hex": "#d87373",
  "rgb": {
    "r": 216,
    "g": 115,
    "b": 115,
    "a": 1
  },
  "hsv": {
    "h": 0,
    "s": 0.46666666666666656,
    "v": 0.8464646464646465,
    "a": 1
  },
  "oldHue": 0,
  "source": "rgb"
}

因此，基本上您需要做的是访问

e.hex

，如下所示：

<ChromePicker
      color={value}
      value={value}
      onChange={e => {
        setValue(e.hex);
      }}
    />

{
设定值（e.hex）；
}}
/>

或类似（使用破坏）：

{
设定值（十六进制）；
}}
/>

在onChange中，尝试

console.log（e）

而不是

setValue（e.target.value）

查看事件是否包含外观正确的目标。用您找到的信息更新您的问题。在ChromePicker

onchange

，

e.target

中，似乎未定义，您是否尝试过

console.log

e？这是一个非常具体的错误，可以准确地告诉您问题所在

e.target

未定义，因此无论

e

是什么，它都没有

.target

属性。根据文档，有一个

onChangeComplete

属性需要一个带有

color

参数的函数。你现在可以试试

setValue（e）

。使用console.log（e）它似乎可以正常工作，我可以在颜色周围移动，不会出现任何错误，而且我可以在console中看到所有十六进制值，但我完成后无法设置颜色值。也许我应该创建一个“onClose”函数？在接近设定值时这么说？谢谢你这么快的回答！！！：）您可以将控制台输出添加到问题中吗？这一点至关重要。因为如果您只看到十六进制颜色字符串而不是对象，那么问题很明显：字符串没有

.target

，更不用说

.target.value

.aaaa了，您就搞定了！！！！非常感谢大家！！！！：）感谢大家，今天我学到了一些新东西！

<ChromePicker
      color={value}
      value={value}
      onChange={({hex}) => {
        setValue(hex);
      }}
    />