Javascript 如何绕过React'；颜色的错误处理

试图找出是否有办法绕过React对颜色的错误处理

如果用户输入的颜色不正确（无论是十六进制颜色还是字符串），则第一个内部DIV将作为默认值，背景为空。 第二个内部DIV位于第一个DIV的顶部，用于显示this.props.value的颜色。 这可以很好地在第一个分区中显示my

emptyBackground

值，当用户输入正确的颜色（例如橙色）时，第二个分区将显示橙色的背景色，与第一个分区重叠

现在，如果我将

orange

更改为

orangered

，这个div将更改为

orangered

我试图解决的问题是，当我键入orangere时，它仍然会显示原始的橙色，而不是第二个div的默认背景。当输入了不正确的颜色时，react似乎不会提示重新渲染。有什么办法可以解决这个问题吗

export default class ColorRender extends Component {
  constructor(props) {
  super(props);

  this.onChange = this.onChange.bind(this);
}

onChange(e) {
  this.props.onChange(e.target.value);
}

render() {
   const disabled = this.props.disabled || this.props.readonly;

return (
  <div
    style={{ position: 'relative' }}
  >
    <input
      type="text"
      value={this.props.value}
      placeholder={this.props.placeholder}
      onChange={this.onChange}
      style={{
        marginBottom: 20,
        width: `calc(100% - ${COLOR_BOX_WIDTH}px - ${COLOR_BOX_MARGIN_RIGHT}px - ${COLOR_BOX_MARGIN_LEFT}px)`,
      }}
      disabled={disabled}
    />

    <div
      style={{
        ...contentStyle,
        backgroundImage: `url(${emptyBackground})`,
      }}
    />

    <div
      className="color-display"
      style={{
        ...contentStyle,
        backgroundColor: this.props.value,
        zIndex: 1000,
      }}
    />
  </div>
);
}
}

导出默认类ColorRender扩展组件{
建造师（道具）{
超级（道具）；
this.onChange=this.onChange.bind（this）；
}
onChange（e）{
this.props.onChange（即target.value）；
}
render（）{
const disabled=this.props.disabled | | this.props.readonly；
返回(
);
}
}

此行为与React无关。现代浏览器将忽略将颜色属性设置为不受支持的值的尝试。通过打开开发控制台，以某种方式选择DOM元素，并使用类似于

myElement.style.backgroundColor='orange'

的内容将其颜色设置为橙色，您可以轻松地自己尝试。然后尝试将其设置为无效值，如“orangere”。元素将保持橙色，而不是还原为默认值或继承值

---

解决这个问题的最好方法可能是手动检查用户输入的颜色是否有效。类似于包的东西不仅会检查它是否是a，还会检查十六进制和RGB值。如果用户输入有效，请让React按常规进行渲染。但是如果它无效，您可以捕获它并使用默认值或继承值来代替。

尽管这是标准的DOM元素行为（as），但您可以使用react覆盖它

将

.color display

div与另一个div（

.color display包装器

）包装，并设置其默认颜色。通过屏幕更新

彩色显示

背景。如果变量中的值无效，则背景颜色将是透明的，并且将显示包装器的背景

类ColorRender扩展了React.Component{ 状态={颜色：'橙色'}； onChange=（e）=>this.setState（{color:e.target.value}）； render（）{ const{color}=this.state； 返回( ); } } ReactDOM.render( , 演示 );

：根目录{
--颜色：透明；
}
.彩色显示包装{
宽度：200px；
高度：200px；
背景：url(https://picsum.photos/200/200);
}
.彩色显示器{
位置：相对位置；
背景：var（--颜色）；
身高：100%；
}

最初，我没有使用默认颜色，而是使用了一个带有默认背景图像的div，这会导致任何问题吗？如果您将默认图像移动到包装器中，则不会出现问题。@Ferdinandismel-更新为默认图像作为背景。感谢它起作用，--color，我可以知道它本质上在做什么，或者你具体在调用什么吗？它看起来像是连接到css样式，但不像普通css那样。只是想更好地了解发生了什么编辑：我假设是这样？我忘了添加链接。这个想法很简单，不是直接设置背景色，而是设置一个变量来实现这一点。如果该值不正确，背景将重置回默认值（透明），而不是使用以前的工作颜色。