在 React JS 中使用颜色控制时的警告 [英] Warning when using color control in React JS

问题描述

我正在使用带有 Babel 和 Webpack 的 React JS.我的其他脚本即使使用颜色模块也一切正常，但是，我的一个脚本给了我以下错误:

<块引用>

指定的值"不符合要求的格式.这格式为#rrggbb"，其中 rr、gg、bb 是两位十六进制数数字.

我的代码如下:

从'react'导入React；类 EditDetails 扩展 React.Component {构造函数(道具){超级(道具)；this.state = {背景:#ffffff"};}句柄变化(事件){const target = event.target;const value = target.type === 'checkbox' ?target.checked : target.value;const id = target.id;this.setState({[id]:值});}使成为() {返回 (<div><表格><div>背景颜色:<input id="bg" type="color" onChange={this.handleChange.bind(this)} value="#dddddd"/></div></表单>

)}}导出默认的 EditDetails；

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

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

switch (props.type) {案例提交":案例重置":休息;案例颜色":案例日期":案例日期时间":案例日期时间本地":案例月":案例时间":案例周"://这修复了 iOS Safari 和 Android Chrome 上的未显示问题://https://github.com/facebook/react/issues/7233node.value = '';node.value = node.defaultValue;休息;默认:node.value = node.value;休息;}

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

为什么当我有正确的十六进制格式的颜色代码时会产生这个错误?

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

解决方案

我在技术上遇到了同样的错误，但我认为它与 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]:值});}

与我的对比:

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

无论 onChange 函数的结构有何不同，我们都得到相同的错误.

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

class CheckBoxes 扩展 React.Component {构造函数(道具){超级(道具)；this.state = { 颜色:"" };}handleChange = 事件 =>{this.setState({ color: event.target.value });};使成为() {//const [initial, setInitial] = useState("#5e72e4");//const [color, setColor] = useState({});返回 (<div><输入类型=颜色"值={this.state.color}onChange={this.handleChange}/>
);}}导出默认复选框；

基本上:div的backgroundColor会随着input的值改变而改变.

I am using React JS with Babel and Webpack. Everything has worked fine with my other scripts even ones that use the color module, however, one of my scripts is giving me the following error:

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

My code is as follows:

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;

If I remove the value="#dddddd" from my input tag it actually gives the same error message twice.

Upon further investigation, the error reference points me to the following section in 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;
}

Specifically it is referring to the first node.value line (or the first two node.value lines when I remove the value attribute).

Why is this error being generated when I have the colour code in the correct hexadecimal format?

Note: The correct colour does indeed appear correctly set in the color control.

解决方案

I am technically on the same error, but i don't think it has nothing to do with onChange. Simply because my onChange function is different from the one in the question and I already had a different working version of my code that was working with onChange. The one in the question:

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

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

Versus Mine:

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

And we BOTH get the same error, regardless of the difference in the structure of our onChange functions.

In case it might help anyone else though- this is a version that works:

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;

Basically: backgroundColor of div will change when the value of the input changes.

这篇关于在 React JS 中使用颜色控制时的警告的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！