reactjs - 在 React JS 中使用颜色控制时的警告

Question

我正在将 React JS 与 Babel 和 Webpack 结合使用。一切都与我的其他脚本(甚至使用颜色模块的脚本)一起正常工作，但是，我的一个脚本给了我以下错误:

The specified value "" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

我的代码如下:

import React from 'react';

class EditDetails extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            bg: "#ffffff"
        };
    }

    handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const id = target.id;

            this.setState({
                [id]: value
            });
    }




  render() {
      return (
            <div>
                 <form>
                    <div>Background Colour:<input id="bg" type="color" onChange={this.handleChange.bind(this)} value="#dddddd" /></div>
                  </form>
            </div>
      )
  }
}

export default EditDetails;

如果我从输入标记中删除 value="#dddddd" ，它实际上会给出相同的错误消息两次。

经过进一步调查，错误引用将我指向 ReactDOMInput.js 中的以下部分:

switch (props.type) {
  case 'submit':
  case 'reset':
    break;
  case 'color':
  case 'date':
  case 'datetime':
  case 'datetime-local':
  case 'month':
  case 'time':
  case 'week':
    // This fixes the no-show issue on iOS Safari and Android Chrome:
    // https://github.com/facebook/react/issues/7233
    node.value = '';
    node.value = node.defaultValue;
    break;
  default:
    node.value = node.value;
    break;
}

具体来说，它指的是第一行 node.value 行(或者当我删除 value 属性时，前两行 node.value 行) )。

当我的颜色代码采用正确的十六进制格式时，为什么会生成此错误？

注意:正确的颜色确实在颜色控件中正确设置。

Answer 1

从技术上讲，我遇到了同样的错误，但我认为它与 onChange 无关。只是因为我的 onChange 函数与问题中的函数不同，并且我已经有了与 onChange 一起使用的代码的不同工作版本。问题中的那个:

handleChange(event) {
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const id = target.id;

            this.setState({
                [id]: value
            });
    }

与我的相比:

handleChange = event => {
    this.setState({ value: event.target.value });
  };

无论 onChange 函数的结构如何不同，我们都会遇到相同的错误。

如果它可能对其他人有帮助 - 这是一个有效的版本:

class CheckBoxes extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: "" };
  }

  handleChange = event => {
    this.setState({ color: event.target.value });
  };
  render() {
    // const [initial, setInitial] = useState("#5e72e4");
    // const [color, setColor] = useState({});

    return (
      <div>
        <input
          type="color"
          value={this.state.color}
          onChange={this.handleChange}
        />
        <div
          style={{
            width: 50,
            height: 50,
            marginBottom: 20,
            backgroundColor: this.state.color
          }}
        ></div>
        <br />
        {/* <InputColor initialHexColor={initial} onChange={setColor} /> */}
      </div>
    );
  }
}
export default CheckBoxes;

基本上:当输入的值发生变化时，div 的背景颜色也会发生变化。