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

Question

完整警告： 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.

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

代码正常工作且警告未出现的唯一实例是在开发过程中，因为我弄乱了颜色输入，并且我试图更改与输入相同组件的 mockdiv 的背景.第二次我解除状态它开始表现得像这样。

但最好的部分是：当我告诉它到 Console.log 时 this.state.color.hex（这是改变背景颜色的值）它 console.logs "#00ff40" "#ff0000" "# 0000ff" AND "#ffff00" - 这就是为什么我不知道如何摆脱这个警告。

我不认为这个错误是由 changeHandler 函数引起的。我有很多不同版本的这个函数，它对这个警告影响不大。同样，此警告的另一个问题 (Warning when using color control in React JS) 具有另一个完全不同版本的 changeHandler 函数，并且仍然具有相同的错误。而且我最初为 value color 属性的所有实例提供了一个单一的 changeHandler 函数，但错误仍然存​​在。但如果是的话——如果这意味着摆脱这个警告，我很想知道如何改变它。

结构总结为：

复选框 => ButtonPerSquare =>主页

正方形 => SquaresWrapper =>主页

然后Home将两者合并，并在点击按钮时渲染方块，同样在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;

Answer 1

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

在输入中使用默认值[type=color]

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

#ffffff 是默认值或格式。

Answer 2

不是一个确切的答案，但警告来自 Blink，它是 Chrome 的 DOM 实现。 https://chromium.googlesource.com/chromium/src/+/011c27ced479c76cffd5093ce107082e4da657f3/third_party/blink/renderer/core/html/forms/color_input_type.cc#190

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

MDN 也对此做了一些解释： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Value

将该值设置为任何无效的、完全不透明的十六进制 RGB 颜色将导致该值设置为 #000000。

我不能为 React 说话，但也许它偶然会做这种事情。

HTH。