react点击map生成的dom实现切换功能

最新推荐文章于 2024-09-15 22:47:43 发布

LINMO-ZHUNBEIWANBI

最新推荐文章于 2024-09-15 22:47:43 发布

阅读量176

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/liuxiaocaogu/article/details/130510767

版权

该代码段展示了在React中使用useStatehook管理状态，实现颜色分类选择的功能。filerColorSchFunc函数根据传入的类别过滤颜色方案，并更新状态。colorTitle函数生成可点击的颜色选项，显示当前选中的颜色类别，并用CheckOutlined图标表示已选状态。

摘要由CSDN通过智能技术生成

const [colorID, setColorID] = useState("");
  const filerColorSchFunc = (cate) => {
    setColorID(cate);
    if (cate === 'all') {
      setColorListFunc(schemes);
    } else {
      let currList = schemes.filter((item) => item.cate === cate);
      currList.length == 0 ? setColorListFunc(schemes) : setColorListFunc(currList);
      // setColorListFunc(currList);
    }
  };

  const colorTitle = () => {
    return (
      <div className={styles.colorModelTitle}>
        <div className="color-rainbow" onClick={() => filerColorSchFunc('all')}></div>
        {basicData.colorSchemeList.map((item) => {
          let checkStatus=false;
          item.cate==colorID ? checkStatus=true : checkStatus=false
          
          return (
            <div key={item.cate} style={{ backgroundColor: item.color }} onClick={() => filerColorSchFunc(item.cate)}>
              {checkStatus && <CheckOutlined />}
            </div>
          );
        })}
      </div>
    );
  };