- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
全面警告:react-dom.development.js:2592 指定的值“”不符合要求的格式。格式为“#rrggbb”,其中 rr、gg、bb 是两位十六进制数。
代码运行良好。它正在做它应该做的事情,即:每个输入都会更改按下按钮后出现/更新的方 block 的背景颜色。
代码运行但未出现警告的唯一实例是在开发过程中,因为我弄乱了颜色输入并且我试图更改与输入属于同一组件的 mockdiv 的背景.第二个我解除状态它开始表现得像这样。
但最好的部分是:当我告诉它 Console.log this.state.color.hex(这是改变背景颜色的值)它 console.logs "#00ff40""#ff0000""# 0000ff"和 "#ffff00"- 这就是为什么我不知道如何摆脱这个警告。
我不认为这个错误是由 changeHandler 函数引起的。我有这个功能的许多不同版本,它对这个警告影响不大。同样,此警告的另一个问题 ( Warning when using color control in React JS ) 有另一个完全不同版本的 changeHandler 函数,但仍然有相同的错误。并且我最初对值颜色属性的所有实例只有一个 changeHandler 函数,但错误仍然存在。但是如果是的话——我很想知道如何改变它,如果这意味着摆脱这个警告。
结构总结为:
复选框 => ButtonPerSquare =>主页
Squares => SquaresWrapper =>HOME
然后 Home 将两者合并并在单击按钮时呈现方 block ,该按钮也在 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;
方形.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;
最佳答案
此警告的简单解决方案“此警告不符合要求的格式。格式为“#rrggbb”,其中 rr、gg、bb 为两位十六进制数。”
在输入中使用默认值[type=color]
<input type="color" name="xyz" value="#ffffff" id="xyz" >
#ffffff 是默认值或格式。
关于javascript - React中颜色输入 : The format is "#rrggbb" where rr, gg,bb为两位十六进制数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59606939/
我想用 C 语言编写与正则表达式等效的简单程序: /(.*?)/$1/gi. 有人有例子吗? 最佳答案 如果您了解正则表达式应该做什么,这会很有帮助。 模式 括号(...)表示组的开始和结束。他们还创
昨天刚开始 Ruby on Rails。在我的 layouts/application.html.erb 我有:
我正在使用 pgbouncer-rr 在 redshift 集群中进行查询重写(pgbouncer 调用 rewrite_query.py 进行重写,这里是有关此项目的更多信息的链接 - https:
我的 Oracle 表中有一个 DATE 字段。该字段的填充脚本如下所示: TO_DATE('2013-01-02 10:15:51', 'YYYY-MM-DD HH24:MI:SS') 但在我的 S
我正在插入一个格式为的查询 to_date('25-JUN-13','DD-MON-RR') 在 oracle 中,它工作正常,输出为 25-JUN-13。 在 postgresql 中,它的工作方式
我正在使用 NTL 库进行 RSA 密码分析实现。但是我经常遇到一些关于类型不匹配/不兼容的问题。 例如- 我需要RR n^((h-1.0)/(h*k-1.0)) 的类型值,其中 n 是类型 ZZ ,
在 C 语言中,假设为每个算法提供了完全相同的一组进程,先到先得、最短作业优先和循环法之间的周转时间是否相等?或者调度算法之间会有所不同吗? 最佳答案 通常,实现先来先服务 (FCFS) 和最短作业优
我正在尝试使用 rr 测试以下代码: response = RestClient.get(url, {:params => params}){|response, request, result| r
我不太确定如何在 Erlang 模块中定义 Erlang 函数。我收到以下错误: 11> invoke_record:invoke(). ** exception error: undefined f
全面警告:react-dom.development.js:2592 指定的值“”不符合要求的格式。格式为“#rrggbb”,其中 rr、gg、bb 是两位十六进制数。 代码运行良好。它正在做它应该做
全面警告:react-dom.development.js:2592 指定的值“”不符合要求的格式。格式为“#rrggbb”,其中 rr、gg、bb 是两位十六进制数。 代码运行良好。它正在做它应该做
在做了一些研究之后,我决定在这里寻求建议,因为我不确定如何进行。 问题: 我有一组 RR(IBI)数据 示例:[679, 686, 650...] 如何将其转换为心率? 我的研究: http://ww
我是第一次尝试 RR 双框架,并且对如何转换我现有的 RSpec stub 有点困惑。我看到如何在文档中使用双图获得与 RSpec 的 stub_chain 相同的结果,但是如何创建仅响应已定义方法的
请帮助我理解以下 DNS 问题。这是关于 SIP 与 DNS 的交互。 当对域(例如 abc.com)进行 DNS 查询时,我们会返回两个 NAPTR RR 响应。 abc.com IN NAPTR
我进行了部署并扩展到 2 个副本。我做了转发服务。 我发现 kube-proxy 使用 iptables 从 Service 转发到 Pod。但是iptables的负载均衡策略是RANDOM。 如何在
我已经编写了一个平衡 BST 的代码,但我无法在 BST 中添加超过 5 个元素!我们有 3 种情况,我们从不平衡的节点到我们想要插入它的节点进行 RR,当我添加 5 个节点时,这段代码工作正常..但
现在我使用 rr gem 来 stub 项目模型的计数方法,然后我复制索引操作来检查计数方法是否被调用。我打算使用 mocha gem,但我不知道什么是 mocha gem 中的 assert_rec
在我的代码中,我有类似于以下人为示例的代码。 class Excel def self.do_tasks with_excel do |excel| delete_old_ex
我正在尝试使用时间戳格式 [DD-MON-RR HH.MI.SSXFF AM] 插入我的日期。 我无法以任何可能的方式修改数据库设置,并且我必须通过 JAVA 的字符串格式插入日期(我也无法修改定义它
DNS 解析器库的最新技术是什么?我对支持以下任何一项或全部的完整(非 stub )解析器特别感兴趣:在一个请求数据包中进行多个查询,完成 DNSSEC 验证,将有关 DNSSEC 验证的详细信息返回
我是一名优秀的程序员,十分优秀!