反应颜色无法读取未定义的属性 'value'

Question

（react 中的一种新方式）我正在尝试将 react-color 实现为项目中的功能组件，但我无法更改颜色。所有显示都很好，但是当我尝试更改颜色时出现错误：

TypeError: Cannot read property 'value' of undefined

我尝试改用 class 组件，它工作得更好，但我也遇到了非常相似的错误。一些想法？

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

Answer 1

你只是做错了。显然您正在尝试访问 e.target.value，而 e returns 类似：

{
  "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);
      }}
    />

或者喜欢（使用解构）：

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

反应颜色无法读取未定义的属性 'value'

react-color Cannot read property 'value' of undefined

javascript

reactjs

react-color

反应颜色无法读取未定义的 属性 'value'

react-color Cannot read property 'value' of undefined

javascript

reactjs

react-color

反应颜色无法读取未定义的属性 'value'