javascript - 将 Hue 状态值插入 Chromajs HSL 状态值

Question

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

当我尝试输入红色时，色调的状态变为红色。此外，颜色的值在第一次“r”键击时变为红色，然后在任何额外的击键之后它变为黑色。它在 Dev Tools 中显示 rgb(0, 0, 0, 1) 的值。

我不明白为什么它在单个字母上变成红色，以及为什么当颜色值应该是 chroma('red', 1, 0.5, "hsl") 时它变成黑色。

我对 chromajs 的使用有什么不理解的地方？

import React from 'react';
import './App.css';
import chroma from 'chroma-js';


class App extends React.Component {
  constructor(props) {
  super(props);
  this.state = {
    hue: '',
    color: ''
  };
  this.handleChange = this.handleChange.bind(this);
  }
  handleChange(e) {
    this.setState({
      hue: e.target.value,
      color: chroma(this.state.hue, 1, 0.5, "hsl")
    })
  }

  render() {
    const style = {
      background: this.state.color,
      height: 200
    }
    return (
      <div style={style}>
        <input value={this.state.hue} onChange={this.handleChange}></input>
      </div>
    );
  }
}

export default App;

Answer 1

如果您像这样更改 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 值。如果用户输入不通过色度验证，它将使用白色。

你可以看到它在这里工作: https://codesandbox.io/s/rmmk0j5mmp?fontsize=14

如果您想按照开始的方式构建颜色，则需要传递色调 Angular ，而不是颜色名称。来自文档:

You can construct colors from different color spaces by passing the name of color space as the last argument. Here we define the same color in HSL by passing the hue angle (0-360) and percentages for saturation and l*ightness: chroma(330, 1, 0.6, 'hsl')

来源:https://gka.github.io/chroma.js/