Javascript 将色调状态值插入Chromajs HSL状态值

我正在尝试根据用户的输入更改divs的背景色。我想将状态键设置为色调，值为用户的输入。然后我想获取该状态并将其注入另一个状态键，称为color'svalue。我希望颜色值是在chromajs中使用hsl的色调状态值

当我尝试输入红色时，色调的状态变为红色。此外，颜色的值在第一次“r”击键时变为红色，然后在任何其他击键后变为黑色。它在开发工具中显示rgb（0,0,0,1）的值

我不明白为什么它会在一个字母上变为红色，为什么当颜色值应该是色度（'red'，1，0.5，“hsl”）时它会变为黑色

关于chromajs的使用，我还不了解什么

从“React”导入React；
导入“/App.css”；
从“chroma js”导入色度；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
色调：''，
颜色：“”
};
this.handleChange=this.handleChange.bind（this）；
}
手变（e）{
这是我的国家({
色调：即目标值，
颜色：色度（this.state.hue，1,0.5，“hsl”）
})
}
render（）{
常量样式={
背景：this.state.color，
身高：200
}
返回(
);
}
}
导出默认应用程序如果您将handleChange函数更改为这样，则div的颜色将起作用：

handleChange(e) {
  const color = chroma.valid(e.target.value) 
    ? chroma(e.target.value).saturate().alpha(0.5) : chroma("white");
  this.setState({
    hue: e.target.value,
    color,
  });
}

首先，我们需要通过chroma.valid（）函数验证用户输入。
之后，我们可以设置饱和度和alpha值。如果用户输入无法通过色度验证，则将使用白色

您可以看到它在这里工作：

如果要通过开始的方式构造颜色，则需要传递色调角度，而不是颜色名称。
从文档中：

通过将颜色空间的名称作为最后一个参数传递，可以从不同的颜色空间构造颜色。在这里，我们通过传递色调角度（0-360）和饱和度和亮度的百分比来定义HSL中的相同颜色：
chroma（330,1,0.6，'HSL'）

来源：
Um
this.state.hue
是前一个状态的值吗？那是故意的吗？是的。我的最终目标是使颜色值的状态成为由输入设置的色调、饱和度和灯光状态的累积。然后我想使用颜色的状态来设置div的最终值。啊哈！白色正是我所需要的。非常感谢你。