React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React实现颜色转换器

基于React的状态管理实现一个简单的颜色转换器

作者：炭烤小橙微辣

这篇文章主要介绍了用React的状态管理,简简单单实现一个颜色转换器,文中有详细的代码示例供大家参考,具有一定的参考价值,需要的朋友可以参考下

初探 React 钩子

React 访问 DOM 节点

在 React 中，要想直接访问 DOM 节点需要使用 React 的一项特性—— ref。

ref：是一个对象，存储一个组件整个生命周期内的值。

在 React 中，React 为我们提供了 useRef 钩子 来创建 ref。

import { useRef } from "react";
export default function ChangeColorForm() {
  const hexColor = useRef();
  const rgbColor = useRef();
  const getFullHexColorStr = str => {
    if (isNaN(parseInt(str, 16))) {
      alert("请输入正确的十六进制颜色值");
      return '';
    }
    if (str.length === 3) {
      return str.split('').map(item => item + item).join('');
    } else {
      const lastChar = str.charAt(str.length - 1);
      const strArr = [...Array(5)];
      return str + strArr.map(s => lastChar).join("");
    }
  }
  const toggleColor = e => {
    e.preventDefault();
    const hexColorStr = hexColor.current.value;
    const rgbColorStr = rgbColor.current.value;
    if (hexColorStr) {
      const hexColor = getFullHexColorStr(hexColorStr).toUpperCase();
        if (!hexColor) {
          return;
        }
        const strArr = [...Array(6)];
        const rgbColorArr = strArr.reduce((pre, cur, index) => {
          if (index % 2 === 1) {
            pre = [...pre, parseInt(hexColor.substring(index - 1, index + 1), 16)];
          }
          return pre;
        },[]);
        rgbColor.current.value = rgbColorArr.join(',');
    } else {
      if (rgbColorStr) {
        const rgbColorArr = rgbColorStr.split(',');
        const isRightLength = rgbColorArr.length === 3;
        const isRightRGB = rgbColorArr.every(colorNum => !isNaN(Number(colorNum) && Number(colorNum) >= 0 && Number(colorNum) <= 255))
        if (isRightLength && isRightRGB) {
          const hexColorArr = rgbColorArr.map(colorNum => Number(colorNum).toString(16));
          hexColor.current.value = hexColorArr.join('').toUpperCase();
        } else {
          alert("请输入正确的rgb格式颜色值");
        }
      }
    }
  };
  return(
    <form onSubmit={toggleColor} style={{padding: '20px'}}>
      <label htmlFor="hexColor">十六进制格式颜色：</label>
      <input name="hexColor" ref={hexColor} type="text" placeholder="请输入十六进制格式颜色"></input>
      <br/>
      <br/>
      <label htmlFor="rgbColor">rgb格式颜色：</label>
      <input name="rgbColor" ref={rgbColor} type="text" placeholder="请输入rgb格式颜色"></input>
      <button>转换</button>
    </form>
  )
}

这里我们手动写了一个关于十六进制颜色值与RGB颜色值互转的简易工具，代码里边我们来看一看 useRef 钩子的用法，我们用 useRef 钩子创建了两个 ref，分别在 JSX 中 input 标签中添加 ref 属性，那么我们就不再需要通过选择器来获取 DOM 元素了，直接在 ref 对象中去取 DOM 元素就可以了，从代码中我们可以看到，这个 DOM 元素存储在 ref 对象中的 current 属性中。

受控组件

在 React 中，受控组件就是以组件内部状态来管理组件内部值得变化的组件。而上一节我们提到了组件的状态有 React 提供的 useState 钩子来进行控制，我们可以理解成受控组件就是由状态来控制属性值变化得组件，由父组件属性传递和事件来驱动状态的变化，使数据产生流动的效果。当然，数据流动的效果也注定使组件不断的重新渲染，这一点，我们也必须要了解。

既然这样，我们来让这个颜色码值转换表单组件改成一个受控组件：

import { useState } from "react";
export default function ChangeColorForm() {
  const [hexColorStr, setHexColorStr] = useState('FFFFFF');
  const [rgbColorStr, setRgbColorStr] = useState('');
  const getFullHexColorStr = str => {
    if (isNaN(parseInt(str, 16))) {
      alert("请输入正确的十六进制颜色值");
      return '';
    }
    if (str.length === 3) {
      return str.split('').map(item => item + item).join('');
    } else {
      const lastChar = str.charAt(str.length - 1);
      const strArr = [...Array(5)];
      return str + strArr.map(() => lastChar).join("");
    }
  }
  const toggleColor = e => {
    e.preventDefault();
    if (hexColorStr) {
      const hexColor = getFullHexColorStr(hexColorStr).toUpperCase();
        if (!hexColor) {
          return;
        }
        const strArr = [...Array(6)];
        const rgbColorArr = strArr.reduce((pre, cur, index) => {
          if (index % 2 === 1) {
            pre = [...pre, parseInt(hexColor.substring(index - 1, index + 1), 16)];
          }
          return pre;
        },[]);
        setRgbColorStr(rgbColorArr.join(','));
    } else {
      if (rgbColorStr) {
        const rgbColorArr = rgbColorStr.split(',');
        const isRightLength = rgbColorArr.length === 3;
        const isRightRGB = rgbColorArr.every(colorNum => !isNaN(Number(colorNum) && Number(colorNum) >= 0 && Number(colorNum) <= 255))
        if (isRightLength && isRightRGB) {
          const hexColorArr = rgbColorArr.map(colorNum => Number(colorNum).toString(16));
          setHexColorStr(hexColorArr.join('').toUpperCase());
        } else {
          alert("请输入正确的rgb格式颜色值");
        }
      }
    }
  };
  return(
    <form onSubmit={toggleColor} style={{padding: '20px'}}>
      <label htmlFor="hexColor">十六进制格式颜色：</label>
      <input name="hexColor" type="text" value={hexColorStr} placeholder="请输入十六进制格式颜色" onChange={e => {setHexColorStr(e.target.value)}}></input>
      <br/>
      <br/>
      <label htmlFor="rgbColor">rgb格式颜色：</label>
      <input name="rgbColor" type="text" value={rgbColorStr} placeholder="请输入rgb格式颜色" onChange={e => {setRgbColorStr(e.target.value)}}></input>
      <button>转换</button>
    </form>
  )
}

在组件中，通过 React 的状态来保存两个 input 元素的值，只要触发了 onChange 事件，通过参数 e(event).target 来获取 DOM，获取元素值再通过状态设置函数来将状态值更新，使得 DOM 重新渲染，将值又赋值进输入框，形成一个闭合回路。

如果感觉看代码太麻烦，难以理解，我们来看看示意图：

我们把代码拿出来理一理就能得到一个很简单的逻辑图，是不是一目了然。

上面我们利用状态创建的受控组件中，input 元素只有两个，但是在实际的开发中，对应的 input 元素可能有十多二十个甚至更多，按照这样的方法，那是不是得这样重复操作很多次，之前我们提到过，遇到重复的，结构相似的代码，考虑一下是否可以抽象出来封装一下呢？下面我们来介绍一下自定义的钩子。

自定义钩子

从上面的代码我们可以看到，定义状态，input 元素中赋值 value，onChange 方法，他们的结构是不是基本都是一样的呢？我们先来看看定义状态是不是可以抽象为：

// initValue 初始值参数
const [value, setValue] = useState(initValue);

对于 input 元素中的属性赋值，我们还能想起属性较多的时候，整体属性的传递方法吗？估计能想起来{...props}；那我们能否把 value，跟 onChange 封装在一个对象里边呢？然后用一个函数返回回来。我们新建一个 hooks.js文件，来看看怎么封装。

// hooks.js
import { useState } from "react";
export const useInput = initValue => {
  const [value, setValue] = useState(initValue);
  return [
    {value, onChange: (e) => setValue(e.target.value)},
    (custVal = initValue) => setValue(custVal)
  ]
}

一眼看完，可能还没明白为啥要这样封装，先暂时不说，我们还是再来把颜色转换器继续优化一下，再来看看为啥这么封装？

import { useInput } from "./hooks";
export default function ChangeColorForm() {
  const [hexColorProps, setHexColorStr] = useInput('FFFFFF');
  const [rgbColorProps, setRgbColorStr] = useInput('');
  const getFullHexColorStr = str => {
    if (isNaN(parseInt(str, 16))) {
      alert("请输入正确的十六进制颜色值");
      return '';
    }
    if (str.length === 3) {
      return str.split('').map(item => item + item).join('');
    } else {
      const lastChar = str.charAt(str.length - 1);
      const strArr = [...Array(5)];
      return str + strArr.map(() => lastChar).join("");
    }
  }
  const toggleColor = e => {
    e.preventDefault();
    if (hexColorProps.value) {
      const hexColor = getFullHexColorStr(hexColorProps.value).toUpperCase();
        if (!hexColor) {
          return;
        }
        const strArr = [...Array(6)];
        const rgbColorArr = strArr.reduce((pre, cur, index) => {
          if (index % 2 === 1) {
            pre = [...pre, parseInt(hexColor.substring(index - 1, index + 1), 16)];
          }
          return pre;
        },[]);
        setRgbColorStr(rgbColorArr.join(','));
    } else {
      if (rgbColorProps.value) {
        const rgbColorArr = rgbColorProps.value.split(',');
        const isRightLength = rgbColorArr.length === 3;
        const isRightRGB = rgbColorArr.every(colorNum => !isNaN(Number(colorNum) && Number(colorNum) >= 0 && Number(colorNum) <= 255))
        if (isRightLength && isRightRGB) {
          const hexColorArr = rgbColorArr.map(colorNum => Number(colorNum).toString(16));
          setHexColorStr(hexColorArr.join('').toUpperCase());
        } else {
          alert("请输入正确的rgb格式颜色值");
        }
      }
    }
  };
  const resetClick = e => {
    e.preventDefault();
    setHexColorStr();
  }
  return(
    <form onSubmit={toggleColor} style={{padding: '20px'}}>
      <label htmlFor="hexColor">十六进制格式颜色：</label>
      <input {...hexColorProps} name="hexColor" type="text" placeholder="请输入十六进制格式颜色"></input>
      <button onClick={resetClick}>重置</button>
      <br/>
      <br/>
      <label htmlFor="rgbColor">rgb格式颜色：</label>
      <input {...rgbColorProps} name="rgbColor" type="text" placeholder="请输入rgb格式颜色"></input>
      <button>转换</button>
    </form>
  )
}

我们先来看看这两行代码的对比：

// useState React 钩子
const [hexColorStr, setHexColorStr] = useState('FFFFFF');
// useInput 自定义钩子
const [hexColorProps, setHexColorStr] = useInput('FFFFFF');

useState 钩子我们已经用得比较熟悉，熟悉了它的用法与结构，当我们需要封装自定义钩子的时候，当函数能返回跟原始钩子保持一致的结构时，当在使用的时候，是不是就会更加的轻松呢？值得注意的是，这里的 hexColorProps 是包含了 value， onChange 的多属性的属性值，在使用的时候我们是需要注意跟 useState 定义的属性值得区别。

在这次的代码中，我故意添加了一个重置按钮，估计用意你们已经猜到，很直白，就是为了讲解一下 hooks.js 中的这个方法：

(custVal = initValue) => setValue(custVal)

随着 ESNext 的不断更新，前端的代码也是越来越简单，但是只要我们慢慢分析，还是很好理解的，我们来看一下对应 ES5 的代码：

function (custVal) {
  custVal = custVal ? custVal : initValue;
  return setValue(custVal)
}

在实际的开发中，会遇到比较多的表单的联动与重置，不难看出这个方法，就是为给 input 元素提供外部事件（非input 元素的 onChange 事件）来更改或重置 input元素的 value 属性值。

总结

以上就是基于React的状态管理实现一个简单的颜色转换器的详细内容，更多关于React实现颜色转换器的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:
阅读全文