Question

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

当我尝试输入红色时，色相的状态变为红色。同样，在第一个“ r”键击中颜色的值变为红色，然后在进行任何其他击键后颜色变为黑色。它显示了开发工具中的值rgb（0，0，0，1）。

我无法弄清楚为什么单个字母将其更改为红色，为什么当颜色值应为色度（“ red”，1、0.5，“ hsl”）时却变为黑色。

我对色度的使用不了解什么？

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

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

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

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

将色相状态值插入Chromajs HSL状态值

1 个答案: