颜色输入:格式为“rrggbb”，其中rr、gg、bb是两位数的十六进制数。
全面警告：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“和”#ff00“--这就是为什么我不知道如何消除这个警告。
我不认为这个错误是由changeHandler函数引起的。我有许多不同版本的这个功能，它对这个警告没有什么影响。此外，此警告(Warning when using color control in React JS )的另一个问题还有另一个完全不同的changeHandler函数版本，并且仍然存在相同的错误。最初，对于值颜色支柱的所有实例，我都有一个单一的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;回答 2
Stack Overflow用户
发布于 2021-01-09 06:54:20
此警告的一个简单解决方案“此警告不符合所需格式。格式为"#rrggbb”，其中rr、gg、bb是两位数的十六进制数字。“
在inputtype=color中使用默认值
<input type="color" name="xyz" value="#ffffff" id="xyz" >#ffffff是默认值或格式。
Stack Overflow用户
发布于 2020-09-11 08:32:35
不是一个确切的答案，但警告来自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。
我说不出有什么反应，但也许它会做这样的事。
HTH。
https://stackoverflow.com/questions/59606939
复制相似问题
腾讯云开发者
