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.

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

代码正常工作并且警告没有出现的唯一实例是在开发过程中，因为我正在弄乱颜色输入，并且我试图更改与输入属于同一组件的一部分的模拟div的背景。我第二次解除状态时它开始表现得像这样。

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

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

结构概要为：

复选框 => ButtonPerSquare =>HOME

方块 => SquaresWrapper =>HOME

然后，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 是默认值或格式。