最新React入门实战（三）使用Values，总结一下

最后更多分享：前端字节跳动真题解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 

import React, { useState } from ‘react’

import Values from ‘values.js’

import SingleColor from ‘./SingleColor’; // 处理21个色值的组件

function App() {

const [colors, setColor] = useState(‘’);

const [cList, setList] = useState([]);

const [errors, setError] = useState(false);

// 提交函数 获取文本框输入的值并通过values得到颜色列表（21个色值），存储到cList中

const handleSubmit = (e) => {

e.preventDefault();

// 如果输入的颜色值有误，给出警示（红色边框）

try {

let colorList = new Values(colors).all(10);

setList(colorList);

} catch (error) {

console.log(error)

setError(true);

}

}

console.log(“cList”, cList);

return (

<>

颜色生成器

<input type=“text” placeholder=‘#f15025’ onChange={(e) => {setColor(e.target.value);setError(false);}} className={${errors ? 'error': null}} />

{cList.map((color, index) => {

return (

)

})

}

</>

);

}

export default App;

子组件SingleColor：

1. 接收父组件传来的颜色和index，并解构颜色获得rgb、weight、hex值，

其中rgb值为数组，需转换格式

原本的rgb、weight、hex值是这样的：

rgb需要转为rgb(r,g,b)这样的格式——后续我们称为rgb值

hex前面需要加上’#’——后续我们称为十六进制颜色值

2. 每个色块的背景颜色设置成各自的rgb值(新)，设置十六进制颜色值效果一致

3. 每个色块上标明各自rgb值(新)、色调混合值

4. 当某个色块被点击时，复制十六进制颜色值到剪切板，并隐藏rgb值(新)和色调混合值，显示“已复制”

import React, { useState, useEffect } from ‘react’

const SingleColor = ({ color: { rgb, weight, hex }, index }) => {

// 是否显示已复制，默认为false

const [showCopied, setShow] = useState(false);

// 修改hex和rgb的格式

const hexValue = #${hex}

const bcg = rgb.join(‘,’);

// 设置定时器，提示“已复制”1s后消失该字样

useEffect(() => {

let timer = setTimeout(() => {

setShow(false);

return () => clearTimeout(timer)

}, 1000)

})

return (

<>

{/* 1、色块背景颜色是修正格式的rgb，

2、当色块被点击时，复制hexValue值（十六进制颜色值）到剪切板，

3、色块被点击时，隐藏当前标签 */}

className={color ${index > 10 && 'color-light'} ${showCopied && 'notShow'} }

onClick={() => { navigator.clipboard.writeText(hexValue); setShow(true) }} >

{weight}

{hexValue}

### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

.youkuaiyun.com/topics/618166371)**

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。