Javascript React中的颜色输入：格式为“rrggbb”，其中rr、gg、bb是两位十六进制数字

全面警告： react dom.development.js:2592指定的值不符合所需的格式。格式为rrggbb，其中rr、gg、bb为两位十六进制数

代码运行良好。它正在做它应该做的事情，也就是说：每次输入都会改变方块的背景色，一旦按下按钮，方块就会出现/更新

代码正常运行且警告未出现的唯一实例是在开发过程中，因为我正在处理颜色输入，并且试图更改与输入相同组件的mockdiv的背景。我第二次打开状态，它就开始这样了

但最好的部分是：当我告诉它Console.log this.state.color.hex这是一个改变背景颜色的值，它Console.log 00ff40 ff0000 0000ff和ffff00-这就是为什么我不知道如何摆脱这个警告

我认为这个错误不是由changeHandler函数引起的。我有很多不同版本的这个函数，它对这个警告几乎没有影响。此外，此警告的另一个问题还有另一个完全不同版本的changeHandler函数，并且仍然存在相同的错误。我最初对value color prop的所有实例都有一个changeHandler函数，但错误仍然存在。但如果是的话，我想知道如何改变它，如果这意味着摆脱这个警告

结构概要如下：

复选框=>ButtonPerSquare=>HOME

Squares=>SquaresWrapper=>HOME

然后“主页”会将两者合并，并在单击按钮（也在主页上）时渲染正方形

Checkbox.js://我知道这不是一个合适的名称，但在我的模板中，每个新项目都会这样调用它

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;

主页：

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;

---

这不是一个确切的答案，但警告来自Chrome的DOM实现Blink。

如果创建，然后将.value设置为不受支持的值，它将发出该警告。无法禁用此警告，只能通过不将.value设置为无效值来避免此警告

MDN对此也有点解释：

将该值设置为十六进制表示法中无效、完全不透明的RGB颜色将导致该值设置为000000

我不能代表React，但也许它会做这种事情

---

HTH.

答案不准确，但警告来自Chrome的DOM实现Blink。

如果创建，然后将.value设置为不受支持的值，它将发出该警告。无法禁用此警告，只能通过不将.value设置为无效值来避免此警告

MDN对此也有点解释：

将该值设置为十六进制表示法中无效、完全不透明的RGB颜色将导致该值设置为000000

我不能代表React，但也许它会做这种事情

---

HTH.

此警告的简单解决方案此警告不符合要求的格式。格式为rrggbb，其中rr、gg、bb为两位十六进制数

在输入中使用默认值[类型=颜色]

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

---

ffffff是默认值或格式。

此警告的简单解决方案此警告不符合所需格式。格式为rrggbb，其中rr、gg、bb为两位十六进制数

在输入中使用默认值[类型=颜色]

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

---

ffffff是默认值或格式。

是否有任何类型的堆栈跟踪告诉您错误从何处出现？@drewrese stack trace？是的，它通常伴随控制台中的错误和警告。您可能需要展开某些内容，以提供有关错误/警告来源的更多详细信息。有时，您可以直接单击错误，它将在浏览器中打开发生错误的源代码。只是转储一堆文件并说某个地方有错误，不太可能很快得到帮助。我的直觉是，你有一些未定义或格式错误的状态或属性值，这些值很快就会被填充，因此你的应用程序运行良好，但偶尔会出现警告。就像在Home中一样，this.state={color1:{hex:}，color2:{hex:}，color3:{hex:}，color4:{hex:}；这些都不是格式正确的十六进制颜色值。ui？我知道它代表用户界面，但在这种情况下这意味着什么？沙箱上也没有显示任何警告。我注意到，在我不断添加按钮后，它不知何故消失了。所以我在想。我认为你指出的{color1:{hex:}，color2:{hex:}是正确的。在我不断添加按钮之后，我所做的最大区别是{color1:{hex:}，

---

color2:{hex:}变为=>{color1:{hex:white}，color2:{hex:white}作为默认值。是否有任何类型的堆栈跟踪告诉您错误从何处显示？@DrewReese stack trace？是的，它通常伴随控制台中的错误和警告。可能需要展开某些内容，以提供有关错误/警告来源的更多详细信息。有时您可以直接单击错误，它会在浏览器中打开发生错误的源代码。只是转储一堆文件并说某个地方有错误，不可能很快得到您的帮助。我的直觉是您有一些未定义或错误的状态或属性值，这些值会很快填充，因此您的应用程序运行正常，但偶尔会出现警告。就像这样在Home中，this.state={color1:{hex:}，color2:{hex:}，color3:{hex:}，color4:{hex:}；这些都不是格式正确的十六进制颜色值。ui？我知道它代表用户界面，但在这种情况下这意味着什么？沙盒上也没有显示任何警告。我注意到在我不断添加按钮后，它不知怎的消失了。所以我一直在考虑它。我认为你指出的是对的{color1:{hex:}，color2:{hex:}。在我不断添加按钮之后，我所做的最大区别是，{color1:{hex:}，color2:{hex:}变成=>{color1:{hex:white}，color2:{hex:white}作为默认值。