javascript - Color Input in React: The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers

admin管理员组

文章数量:1130349

Full Warning: react-dom.development.js:2592 The specified value "" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

The code IS WORKING FINE. It is doing what it is supposed to do, which is: each input changes the background color of the squares that appear/get updated once the button is pressed.

The only instance when the code was working and the warning was not appearing- was during development as i was messing with the color input and I was trying to change the background of a mockdiv that was part of the same ponent as the input. The second i lifted state it started behaving like this.

But the BEST PART IS: When I tell It to Console.log the this.state.color.hex (which is the value that changes the background color) It console.logs "#00ff40" "#ff0000" "#0000ff" AND "#ffff00" - Which is why I have no idea how to get rid of this warning.

I don't think this error is caused by the changeHandler function. I have had MANY different versions of this function and it has had little impact on this warning. As well, the other question to this warning (Warning when using color control in React JS ) has another pletely different version of a changeHandler function and still has the same error. AND I originally had a one single changeHandler function for all instances of the value color prop, and the error was still there. BUT if it is- I would love to know how to change it if it means getting rid of this warning.

The structure summary is:

Checkbox => ButtonPerSquare =>HOME

Squares => SquaresWrapper =>HOME

Then Home merges the two and renders the squares on the click of the button, which is also on Home.

Checkbox.js: //i know is not a befitting name, but it was already called like that on my template for each new project.

import React from "react";
class CheckBoxes extends React.Component {
 render() {
    return (
      <div>
        <input
          type={this.props.type}
          className={this.props.class}
          value={
            this.props.class === "input1"
              ? this.props.color1
              : this.props.class === "input2"
              ? this.props.color2
              : this.props.class === "input3"
              ? this.props.color3
              : this.props.class === "input4"
              ? this.props.color4
              : console.log("blue")
          }
          onChange={
            this.props.class === "input1"
              ? event => this.props.handleChange1(event)
              : this.props.class === "input2"
              ? event => this.props.handleChange2(event)
              : this.props.class === "input3"
              ? event => this.props.handleChange3(event)
              : this.props.class === "input4"
              ? event => this.props.handleChange4(event)
              : console.log("blue")
          }
        />
        <span>{this.props.sp1}</span>
      </div>
    );
  }
}
export default CheckBoxes; 

ButtonPerSquare.js:

import React, { Component } from "react";
import Checkboxes from "./Checkboxes";
// import "./../App.css";
const numbers = ["1", "2", "3", "4"];
// const colors = ["#ffffff", "#F7E3B3", "#71EB92", "#000fff"];
const classes = ["input1", "input2", "input3", "input4"];
class HeaderButtons extends Component {
  render() {
    //sp is for the span element in the Checkboxes function.
    return (
      <header className={this.props.headerClass}>
        {numbers.map((nums, col) => {
          //   const keys = numbers[nums];
          //   console.log(keys);
          return (
            <Checkboxes
              color1={this.props.color1}
              color2={this.props.color2}
              color3={this.props.color3}
              color4={this.props.color4}
              // color2={this.props.color2}
              // color3={this.props.color3}
              // color4={this.props.color4}
              handleChange1={event => this.props.handleChange1(event)}
              handleChange2={event => this.props.handleChange2(event)}
              handleChange3={event => this.props.handleChange3(event)}
              handleChange4={event => this.props.handleChange4(event)}
              //this.props.handleChange}
              background={this.props.background}
              // className="ColorInput"
              // color={this.props.color}
              sp1={nums}
              key={nums}
              type="color"
              // defaultValue={colors[col]}
              class={classes[col]}
              //   value="red"
            />
          );
        })}
        {/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
      </header>
    );
  }
}
export default HeaderButtons;

Square.js

import React, { Component } from "react";
class Squares extends Component {
  render() {
    return (
      <div
        id={this.props.id}
        className="Square"
        style={{
          background:
            this.props.id === "square1"
              ? this.props.background1
              : this.props.id === "square2"
              ? this.props.background2
              : this.props.id === "square3"
              ? this.props.background3
              : this.props.id === "square4"
              ? this.props.background4
              : console.log("blue")
        }}
      >
        Blue
      </div>
    );
  }
}
export default Squares;

SquaresWrapper.js:

import React, { Component } from "react";
import Squares from "./Squares";
// import "./../App.css";
const numbers = ["1", "2", "3", "4"];
// const backgrounds = ["#ffffff", "#F7E3B3", "#71EB92", "#000fff"];
const classes = ["square1", "square2", "square3", "square4"];
class SquaresWrapper extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {};
  // }

  render() {
    //sp is for the span element in the Checkboxes function.
    return (
      <section className={this.props.sectionClass}>
        {numbers.map((nums, col) => {
          //   const keys = numbers[nums];
          //   console.log(keys);
          return (
            <Squares
              id={classes[col]}
              key={nums}
              background1={this.props.background1}
              background2={this.props.background2}
              background3={this.props.background3}
              background4={this.props.background4}
              //   value="red"
            />
          );
        })}
        {/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
      </section>
    );
  }
}
export default SquaresWrapper;

Home:

import React, { Component } from "react";
import HeaderButtons from "./ButtonPerSquare";
import ReactDOM from "react-dom";

// import Paragraph from "./Paragraph";
import SquaresWrapper from "./squaresWrapper";
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color1: { hex: "" },
      color2: { hex: "" },
      color3: { hex: "" },
      color4: { hex: "" }
    };
  }

  render() {
    return (
      <div className="creatorDiv">
        <HeaderButtons
          color1={this.state.color1.hex}
          color2={this.state.color2.hex}
          color3={this.state.color3.hex}
          color4={this.state.color4.hex}
          handleChange1={event =>
            this.setState({
              color1: { hex: event.target.value }
            })
          }
          handleChange2={event =>
            this.setState({
              color2: { hex: event.target.value }
            })
          }
          handleChange3={event =>
            this.setState({
              color3: { hex: event.target.value }
            })
          }
          handleChange4={event =>
            this.setState({
              color4: { hex: event.target.value }
            })
          }
          headerClass="HeaderDiv"
        />
        <button
          onMouseDown={() =>
            ReactDOM.render(
              <SquaresWrapper
                sectionClass="squaresWrapper"
                background1={this.state.color1.hex}
                // {this.state.color1}
                background2={this.state.color2.hex}
                // {this.state.color2}
                background3={this.state.color3.hex}
                // {this.state.color3}
                background4={this.state.color4.hex}
                // {this.state.color4}
              />,
              document.getElementById("blue")
            )
          }
        >
          Create Color
        </button>
        <div id="blue"></div>
      </div>
    );
  }
}
export default Home;

Full Warning: react-dom.development.js:2592 The specified value "" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

The code IS WORKING FINE. It is doing what it is supposed to do, which is: each input changes the background color of the squares that appear/get updated once the button is pressed.

The only instance when the code was working and the warning was not appearing- was during development as i was messing with the color input and I was trying to change the background of a mockdiv that was part of the same ponent as the input. The second i lifted state it started behaving like this.

But the BEST PART IS: When I tell It to Console.log the this.state.color.hex (which is the value that changes the background color) It console.logs "#00ff40" "#ff0000" "#0000ff" AND "#ffff00" - Which is why I have no idea how to get rid of this warning.

I don't think this error is caused by the changeHandler function. I have had MANY different versions of this function and it has had little impact on this warning. As well, the other question to this warning (Warning when using color control in React JS ) has another pletely different version of a changeHandler function and still has the same error. AND I originally had a one single changeHandler function for all instances of the value color prop, and the error was still there. BUT if it is- I would love to know how to change it if it means getting rid of this warning.

The structure summary is:

Checkbox => ButtonPerSquare =>HOME

Squares => SquaresWrapper =>HOME

Then Home merges the two and renders the squares on the click of the button, which is also on Home.

Checkbox.js: //i know is not a befitting name, but it was already called like that on my template for each new project.

import React from "react";
class CheckBoxes extends React.Component {
 render() {
    return (
      <div>
        <input
          type={this.props.type}
          className={this.props.class}
          value={
            this.props.class === "input1"
              ? this.props.color1
              : this.props.class === "input2"
              ? this.props.color2
              : this.props.class === "input3"
              ? this.props.color3
              : this.props.class === "input4"
              ? this.props.color4
              : console.log("blue")
          }
          onChange={
            this.props.class === "input1"
              ? event => this.props.handleChange1(event)
              : this.props.class === "input2"
              ? event => this.props.handleChange2(event)
              : this.props.class === "input3"
              ? event => this.props.handleChange3(event)
              : this.props.class === "input4"
              ? event => this.props.handleChange4(event)
              : console.log("blue")
          }
        />
        <span>{this.props.sp1}</span>
      </div>
    );
  }
}
export default CheckBoxes; 

ButtonPerSquare.js:

import React, { Component } from "react";
import Checkboxes from "./Checkboxes";
// import "./../App.css";
const numbers = ["1", "2", "3", "4"];
// const colors = ["#ffffff", "#F7E3B3", "#71EB92", "#000fff"];
const classes = ["input1", "input2", "input3", "input4"];
class HeaderButtons extends Component {
  render() {
    //sp is for the span element in the Checkboxes function.
    return (
      <header className={this.props.headerClass}>
        {numbers.map((nums, col) => {
          //   const keys = numbers[nums];
          //   console.log(keys);
          return (
            <Checkboxes
              color1={this.props.color1}
              color2={this.props.color2}
              color3={this.props.color3}
              color4={this.props.color4}
              // color2={this.props.color2}
              // color3={this.props.color3}
              // color4={this.props.color4}
              handleChange1={event => this.props.handleChange1(event)}
              handleChange2={event => this.props.handleChange2(event)}
              handleChange3={event => this.props.handleChange3(event)}
              handleChange4={event => this.props.handleChange4(event)}
              //this.props.handleChange}
              background={this.props.background}
              // className="ColorInput"
              // color={this.props.color}
              sp1={nums}
              key={nums}
              type="color"
              // defaultValue={colors[col]}
              class={classes[col]}
              //   value="red"
            />
          );
        })}
        {/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
      </header>
    );
  }
}
export default HeaderButtons;

Square.js

import React, { Component } from "react";
class Squares extends Component {
  render() {
    return (
      <div
        id={this.props.id}
        className="Square"
        style={{
          background:
            this.props.id === "square1"
              ? this.props.background1
              : this.props.id === "square2"
              ? this.props.background2
              : this.props.id === "square3"
              ? this.props.background3
              : this.props.id === "square4"
              ? this.props.background4
              : console.log("blue")
        }}
      >
        Blue
      </div>
    );
  }
}
export default Squares;

SquaresWrapper.js:

import React, { Component } from "react";
import Squares from "./Squares";
// import "./../App.css";
const numbers = ["1", "2", "3", "4"];
// const backgrounds = ["#ffffff", "#F7E3B3", "#71EB92", "#000fff"];
const classes = ["square1", "square2", "square3", "square4"];
class SquaresWrapper extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {};
  // }

  render() {
    //sp is for the span element in the Checkboxes function.
    return (
      <section className={this.props.sectionClass}>
        {numbers.map((nums, col) => {
          //   const keys = numbers[nums];
          //   console.log(keys);
          return (
            <Squares
              id={classes[col]}
              key={nums}
              background1={this.props.background1}
              background2={this.props.background2}
              background3={this.props.background3}
              background4={this.props.background4}
              //   value="red"
            />
          );
        })}
        {/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
      </section>
    );
  }
}
export default SquaresWrapper;

Home:

import React, { Component } from "react";
import HeaderButtons from "./ButtonPerSquare";
import ReactDOM from "react-dom";

// import Paragraph from "./Paragraph";
import SquaresWrapper from "./squaresWrapper";
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color1: { hex: "" },
      color2: { hex: "" },
      color3: { hex: "" },
      color4: { hex: "" }
    };
  }

  render() {
    return (
      <div className="creatorDiv">
        <HeaderButtons
          color1={this.state.color1.hex}
          color2={this.state.color2.hex}
          color3={this.state.color3.hex}
          color4={this.state.color4.hex}
          handleChange1={event =>
            this.setState({
              color1: { hex: event.target.value }
            })
          }
          handleChange2={event =>
            this.setState({
              color2: { hex: event.target.value }
            })
          }
          handleChange3={event =>
            this.setState({
              color3: { hex: event.target.value }
            })
          }
          handleChange4={event =>
            this.setState({
              color4: { hex: event.target.value }
            })
          }
          headerClass="HeaderDiv"
        />
        <button
          onMouseDown={() =>
            ReactDOM.render(
              <SquaresWrapper
                sectionClass="squaresWrapper"
                background1={this.state.color1.hex}
                // {this.state.color1}
                background2={this.state.color2.hex}
                // {this.state.color2}
                background3={this.state.color3.hex}
                // {this.state.color3}
                background4={this.state.color4.hex}
                // {this.state.color4}
              />,
              document.getElementById("blue")
            )
          }
        >
          Create Color
        </button>
        <div id="blue"></div>
      </div>
    );
  }
}
export default Home;

• javascript
• reactjs
• input
• types
• colors

Share Improve this question Follow asked Jan 6, 2020 at 5:09 GiselleMtnezSGiselleMtnezS 10522 gold badges22 silver badges1313 bronze badges 14

• Is there any sort of stack trace that tells you where the error is manifesting from? – Drew Reese Commented Jan 6, 2020 at 6:39
• @DrewReese Stack Trace? – GiselleMtnezS Commented Jan 6, 2020 at 6:49
• Yes, it usually acpanies errors and warnings in the console. There may be something you have to expand that gives you more details about the origins of the error/warning. Sometimes you can literally click the error and it'll open the source up in the browser where the error occurred. Just dumping a bunch of files and saying there's an error somewhere isn't likely to get you help quickly. My hunch is you have some undefined or malformed state or prop value(s) that is quickly populated and thus your app runs fine, but with occasional warnings. – Drew Reese Commented Jan 6, 2020 at 6:58
• 1 Like this in Home, this.state = { color1: { hex: "" }, color2: { hex: "" }, color3: { hex: "" }, color4: { hex: "" } }; none of these are properly formatted hexadecimal color values. – Drew Reese Commented Jan 6, 2020 at 6:59
• 1 ui? I know it stands for UserInterface but what does that mean in this case? There wasn't any warnings showing at all on the sandbox either. I noticed at some point after I kept adding buttons it somehow disappeared. So I was thinking about it. And i think you were right to point out the { color1: { hex: "" }, color2: { hex: "" }. The most major difference I made after I kept adding buttons was that { color1: { hex: "" }, color2: { hex: "" } turned to => { color1: { hex: "white" }, color2: { hex: "white" } as the default value to go there. – GiselleMtnezS Commented Jan 7, 2020 at 4:59

 |  Show 9 more ments

2 Answers 2

Sorted by: Reset to default 6

a simple solution for this warning "This warning does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers."

use default value in input[type=color]

<input type="color" name="xyz" value="#ffffff" id="xyz" >

#ffffff is default value or format.

Not an exact answer, but the warning is ing from Blink which is Chrome's DOM implementation. https://chromium.googlesource./chromium/src/+/011c27ced479c76cffd5093ce107082e4da657f3/third_party/blink/renderer/core/html/forms/color_input_type#190

If you create an <input type=color> and then set the .value to an unsupported value, it will issue that warning. There's no way to disable this warning, you can only avoid it by not setting the .value to an invalid value.

MDN explains this a bit too: https://developer.mozilla/en-US/docs/Web/HTML/Element/input/color#Value

Setting the value to anything that isn't a valid, fully-opaque, RGB color in hexadecimal notation will result in the value being set to #000000.

I can't speak for React, but maybe it does this sort of thing incidentally.

HTH.

Full Warning: react-dom.development.js:2592 The specified value "" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

The code IS WORKING FINE. It is doing what it is supposed to do, which is: each input changes the background color of the squares that appear/get updated once the button is pressed.

The only instance when the code was working and the warning was not appearing- was during development as i was messing with the color input and I was trying to change the background of a mockdiv that was part of the same ponent as the input. The second i lifted state it started behaving like this.

But the BEST PART IS: When I tell It to Console.log the this.state.color.hex (which is the value that changes the background color) It console.logs "#00ff40" "#ff0000" "#0000ff" AND "#ffff00" - Which is why I have no idea how to get rid of this warning.

I don't think this error is caused by the changeHandler function. I have had MANY different versions of this function and it has had little impact on this warning. As well, the other question to this warning (Warning when using color control in React JS ) has another pletely different version of a changeHandler function and still has the same error. AND I originally had a one single changeHandler function for all instances of the value color prop, and the error was still there. BUT if it is- I would love to know how to change it if it means getting rid of this warning.

The structure summary is:

Checkbox => ButtonPerSquare =>HOME

Squares => SquaresWrapper =>HOME

Then Home merges the two and renders the squares on the click of the button, which is also on Home.

Checkbox.js: //i know is not a befitting name, but it was already called like that on my template for each new project.

import React from "react";
class CheckBoxes extends React.Component {
 render() {
    return (
      <div>
        <input
          type={this.props.type}
          className={this.props.class}
          value={
            this.props.class === "input1"
              ? this.props.color1
              : this.props.class === "input2"
              ? this.props.color2
              : this.props.class === "input3"
              ? this.props.color3
              : this.props.class === "input4"
              ? this.props.color4
              : console.log("blue")
          }
          onChange={
            this.props.class === "input1"
              ? event => this.props.handleChange1(event)
              : this.props.class === "input2"
              ? event => this.props.handleChange2(event)
              : this.props.class === "input3"
              ? event => this.props.handleChange3(event)
              : this.props.class === "input4"
              ? event => this.props.handleChange4(event)
              : console.log("blue")
          }
        />
        <span>{this.props.sp1}</span>
      </div>
    );
  }
}
export default CheckBoxes; 

ButtonPerSquare.js:

import React, { Component } from "react";
import Checkboxes from "./Checkboxes";
// import "./../App.css";
const numbers = ["1", "2", "3", "4"];
// const colors = ["#ffffff", "#F7E3B3", "#71EB92", "#000fff"];
const classes = ["input1", "input2", "input3", "input4"];
class HeaderButtons extends Component {
  render() {
    //sp is for the span element in the Checkboxes function.
    return (
      <header className={this.props.headerClass}>
        {numbers.map((nums, col) => {
          //   const keys = numbers[nums];
          //   console.log(keys);
          return (
            <Checkboxes
              color1={this.props.color1}
              color2={this.props.color2}
              color3={this.props.color3}
              color4={this.props.color4}
              // color2={this.props.color2}
              // color3={this.props.color3}
              // color4={this.props.color4}
              handleChange1={event => this.props.handleChange1(event)}
              handleChange2={event => this.props.handleChange2(event)}
              handleChange3={event => this.props.handleChange3(event)}
              handleChange4={event => this.props.handleChange4(event)}
              //this.props.handleChange}
              background={this.props.background}
              // className="ColorInput"
              // color={this.props.color}
              sp1={nums}
              key={nums}
              type="color"
              // defaultValue={colors[col]}
              class={classes[col]}
              //   value="red"
            />
          );
        })}
        {/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
      </header>
    );
  }
}
export default HeaderButtons;

Square.js

import React, { Component } from "react";
class Squares extends Component {
  render() {
    return (
      <div
        id={this.props.id}
        className="Square"
        style={{
          background:
            this.props.id === "square1"
              ? this.props.background1
              : this.props.id === "square2"
              ? this.props.background2
              : this.props.id === "square3"
              ? this.props.background3
              : this.props.id === "square4"
              ? this.props.background4
              : console.log("blue")
        }}
      >
        Blue
      </div>
    );
  }
}
export default Squares;

SquaresWrapper.js:

import React, { Component } from "react";
import Squares from "./Squares";
// import "./../App.css";
const numbers = ["1", "2", "3", "4"];
// const backgrounds = ["#ffffff", "#F7E3B3", "#71EB92", "#000fff"];
const classes = ["square1", "square2", "square3", "square4"];
class SquaresWrapper extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {};
  // }

  render() {
    //sp is for the span element in the Checkboxes function.
    return (
      <section className={this.props.sectionClass}>
        {numbers.map((nums, col) => {
          //   const keys = numbers[nums];
          //   console.log(keys);
          return (
            <Squares
              id={classes[col]}
              key={nums}
              background1={this.props.background1}
              background2={this.props.background2}
              background3={this.props.background3}
              background4={this.props.background4}
              //   value="red"
            />
          );
        })}
        {/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
      </section>
    );
  }
}
export default SquaresWrapper;

Home:

import React, { Component } from "react";
import HeaderButtons from "./ButtonPerSquare";
import ReactDOM from "react-dom";

// import Paragraph from "./Paragraph";
import SquaresWrapper from "./squaresWrapper";
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color1: { hex: "" },
      color2: { hex: "" },
      color3: { hex: "" },
      color4: { hex: "" }
    };
  }

  render() {
    return (
      <div className="creatorDiv">
        <HeaderButtons
          color1={this.state.color1.hex}
          color2={this.state.color2.hex}
          color3={this.state.color3.hex}
          color4={this.state.color4.hex}
          handleChange1={event =>
            this.setState({
              color1: { hex: event.target.value }
            })
          }
          handleChange2={event =>
            this.setState({
              color2: { hex: event.target.value }
            })
          }
          handleChange3={event =>
            this.setState({
              color3: { hex: event.target.value }
            })
          }
          handleChange4={event =>
            this.setState({
              color4: { hex: event.target.value }
            })
          }
          headerClass="HeaderDiv"
        />
        <button
          onMouseDown={() =>
            ReactDOM.render(
              <SquaresWrapper
                sectionClass="squaresWrapper"
                background1={this.state.color1.hex}
                // {this.state.color1}
                background2={this.state.color2.hex}
                // {this.state.color2}
                background3={this.state.color3.hex}
                // {this.state.color3}
                background4={this.state.color4.hex}
                // {this.state.color4}
              />,
              document.getElementById("blue")
            )
          }
        >
          Create Color
        </button>
        <div id="blue"></div>
      </div>
    );
  }
}
export default Home;

Full Warning: react-dom.development.js:2592 The specified value "" does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

The code IS WORKING FINE. It is doing what it is supposed to do, which is: each input changes the background color of the squares that appear/get updated once the button is pressed.

The only instance when the code was working and the warning was not appearing- was during development as i was messing with the color input and I was trying to change the background of a mockdiv that was part of the same ponent as the input. The second i lifted state it started behaving like this.

But the BEST PART IS: When I tell It to Console.log the this.state.color.hex (which is the value that changes the background color) It console.logs "#00ff40" "#ff0000" "#0000ff" AND "#ffff00" - Which is why I have no idea how to get rid of this warning.

I don't think this error is caused by the changeHandler function. I have had MANY different versions of this function and it has had little impact on this warning. As well, the other question to this warning (Warning when using color control in React JS ) has another pletely different version of a changeHandler function and still has the same error. AND I originally had a one single changeHandler function for all instances of the value color prop, and the error was still there. BUT if it is- I would love to know how to change it if it means getting rid of this warning.

The structure summary is:

Checkbox => ButtonPerSquare =>HOME

Squares => SquaresWrapper =>HOME

Then Home merges the two and renders the squares on the click of the button, which is also on Home.

Checkbox.js: //i know is not a befitting name, but it was already called like that on my template for each new project.

import React from "react";
class CheckBoxes extends React.Component {
 render() {
    return (
      <div>
        <input
          type={this.props.type}
          className={this.props.class}
          value={
            this.props.class === "input1"
              ? this.props.color1
              : this.props.class === "input2"
              ? this.props.color2
              : this.props.class === "input3"
              ? this.props.color3
              : this.props.class === "input4"
              ? this.props.color4
              : console.log("blue")
          }
          onChange={
            this.props.class === "input1"
              ? event => this.props.handleChange1(event)
              : this.props.class === "input2"
              ? event => this.props.handleChange2(event)
              : this.props.class === "input3"
              ? event => this.props.handleChange3(event)
              : this.props.class === "input4"
              ? event => this.props.handleChange4(event)
              : console.log("blue")
          }
        />
        <span>{this.props.sp1}</span>
      </div>
    );
  }
}
export default CheckBoxes; 

ButtonPerSquare.js:

import React, { Component } from "react";
import Checkboxes from "./Checkboxes";
// import "./../App.css";
const numbers = ["1", "2", "3", "4"];
// const colors = ["#ffffff", "#F7E3B3", "#71EB92", "#000fff"];
const classes = ["input1", "input2", "input3", "input4"];
class HeaderButtons extends Component {
  render() {
    //sp is for the span element in the Checkboxes function.
    return (
      <header className={this.props.headerClass}>
        {numbers.map((nums, col) => {
          //   const keys = numbers[nums];
          //   console.log(keys);
          return (
            <Checkboxes
              color1={this.props.color1}
              color2={this.props.color2}
              color3={this.props.color3}
              color4={this.props.color4}
              // color2={this.props.color2}
              // color3={this.props.color3}
              // color4={this.props.color4}
              handleChange1={event => this.props.handleChange1(event)}
              handleChange2={event => this.props.handleChange2(event)}
              handleChange3={event => this.props.handleChange3(event)}
              handleChange4={event => this.props.handleChange4(event)}
              //this.props.handleChange}
              background={this.props.background}
              // className="ColorInput"
              // color={this.props.color}
              sp1={nums}
              key={nums}
              type="color"
              // defaultValue={colors[col]}
              class={classes[col]}
              //   value="red"
            />
          );
        })}
        {/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
      </header>
    );
  }
}
export default HeaderButtons;

Square.js

import React, { Component } from "react";
class Squares extends Component {
  render() {
    return (
      <div
        id={this.props.id}
        className="Square"
        style={{
          background:
            this.props.id === "square1"
              ? this.props.background1
              : this.props.id === "square2"
              ? this.props.background2
              : this.props.id === "square3"
              ? this.props.background3
              : this.props.id === "square4"
              ? this.props.background4
              : console.log("blue")
        }}
      >
        Blue
      </div>
    );
  }
}
export default Squares;

SquaresWrapper.js:

import React, { Component } from "react";
import Squares from "./Squares";
// import "./../App.css";
const numbers = ["1", "2", "3", "4"];
// const backgrounds = ["#ffffff", "#F7E3B3", "#71EB92", "#000fff"];
const classes = ["square1", "square2", "square3", "square4"];
class SquaresWrapper extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {};
  // }

  render() {
    //sp is for the span element in the Checkboxes function.
    return (
      <section className={this.props.sectionClass}>
        {numbers.map((nums, col) => {
          //   const keys = numbers[nums];
          //   console.log(keys);
          return (
            <Squares
              id={classes[col]}
              key={nums}
              background1={this.props.background1}
              background2={this.props.background2}
              background3={this.props.background3}
              background4={this.props.background4}
              //   value="red"
            />
          );
        })}
        {/* one parethesis for return.. one curly for the funct... another parenthesis for map... and the blue curly THEN closing header */}
      </section>
    );
  }
}
export default SquaresWrapper;

Home:

import React, { Component } from "react";
import HeaderButtons from "./ButtonPerSquare";
import ReactDOM from "react-dom";

// import Paragraph from "./Paragraph";
import SquaresWrapper from "./squaresWrapper";
class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {
      color1: { hex: "" },
      color2: { hex: "" },
      color3: { hex: "" },
      color4: { hex: "" }
    };
  }

  render() {
    return (
      <div className="creatorDiv">
        <HeaderButtons
          color1={this.state.color1.hex}
          color2={this.state.color2.hex}
          color3={this.state.color3.hex}
          color4={this.state.color4.hex}
          handleChange1={event =>
            this.setState({
              color1: { hex: event.target.value }
            })
          }
          handleChange2={event =>
            this.setState({
              color2: { hex: event.target.value }
            })
          }
          handleChange3={event =>
            this.setState({
              color3: { hex: event.target.value }
            })
          }
          handleChange4={event =>
            this.setState({
              color4: { hex: event.target.value }
            })
          }
          headerClass="HeaderDiv"
        />
        <button
          onMouseDown={() =>
            ReactDOM.render(
              <SquaresWrapper
                sectionClass="squaresWrapper"
                background1={this.state.color1.hex}
                // {this.state.color1}
                background2={this.state.color2.hex}
                // {this.state.color2}
                background3={this.state.color3.hex}
                // {this.state.color3}
                background4={this.state.color4.hex}
                // {this.state.color4}
              />,
              document.getElementById("blue")
            )
          }
        >
          Create Color
        </button>
        <div id="blue"></div>
      </div>
    );
  }
}
export default Home;

• javascript
• reactjs
• input
• types
• colors

Share Improve this question Follow asked Jan 6, 2020 at 5:09 GiselleMtnezSGiselleMtnezS 10522 gold badges22 silver badges1313 bronze badges 14

• Is there any sort of stack trace that tells you where the error is manifesting from? – Drew Reese Commented Jan 6, 2020 at 6:39
• @DrewReese Stack Trace? – GiselleMtnezS Commented Jan 6, 2020 at 6:49
• Yes, it usually acpanies errors and warnings in the console. There may be something you have to expand that gives you more details about the origins of the error/warning. Sometimes you can literally click the error and it'll open the source up in the browser where the error occurred. Just dumping a bunch of files and saying there's an error somewhere isn't likely to get you help quickly. My hunch is you have some undefined or malformed state or prop value(s) that is quickly populated and thus your app runs fine, but with occasional warnings. – Drew Reese Commented Jan 6, 2020 at 6:58
• 1 Like this in Home, this.state = { color1: { hex: "" }, color2: { hex: "" }, color3: { hex: "" }, color4: { hex: "" } }; none of these are properly formatted hexadecimal color values. – Drew Reese Commented Jan 6, 2020 at 6:59
• 1 ui? I know it stands for UserInterface but what does that mean in this case? There wasn't any warnings showing at all on the sandbox either. I noticed at some point after I kept adding buttons it somehow disappeared. So I was thinking about it. And i think you were right to point out the { color1: { hex: "" }, color2: { hex: "" }. The most major difference I made after I kept adding buttons was that { color1: { hex: "" }, color2: { hex: "" } turned to => { color1: { hex: "white" }, color2: { hex: "white" } as the default value to go there. – GiselleMtnezS Commented Jan 7, 2020 at 4:59

 |  Show 9 more ments

2 Answers 2

Sorted by: Reset to default 6

a simple solution for this warning "This warning does not conform to the required format. The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers."

use default value in input[type=color]

<input type="color" name="xyz" value="#ffffff" id="xyz" >

#ffffff is default value or format.

Not an exact answer, but the warning is ing from Blink which is Chrome's DOM implementation. https://chromium.googlesource./chromium/src/+/011c27ced479c76cffd5093ce107082e4da657f3/third_party/blink/renderer/core/html/forms/color_input_type#190

If you create an <input type=color> and then set the .value to an unsupported value, it will issue that warning. There's no way to disable this warning, you can only avoid it by not setting the .value to an invalid value.

MDN explains this a bit too: https://developer.mozilla/en-US/docs/Web/HTML/Element/input/color#Value

Setting the value to anything that isn't a valid, fully-opaque, RGB color in hexadecimal notation will result in the value being set to #000000.

I can't speak for React, but maybe it does this sort of thing incidentally.

HTH.

本文标签：