[JavaScript知识库]hooks实现左添右减

成果样式：

选中样式：

流程：
1：接收默认值，在页面显示出来（传入左右移动组件）
2：可以新增（有正则校验）
3：将最终数据传入父组件

组件核心代码：

/*
 * @Descripttion: 
 * @version: 
 * @Author: ZhangJunQing
 * @Date: 2022-03-07 08:58:15
 * @LastEditors: ZhangJunQing
 * @LastEditTime: 2022-03-07 11:24:57
 */
import React, { useEffect, useState, memo } from 'react'
import RSButton from '@com/RSButton';
import RSInput from '@com/RSInput';
import { message } from 'antd';
import './index.less'
const LeftOrRightMoveCom = (props) => {
    const title = props.title || "";
    // 添加时 验证正则
    const AddReg = props.AddReg || "";
    let [keyAndValue, setKeyAndValue] = useState("");
    let [keyAndValueList, setKeyAndValueList] = useState([]);
	//添加 删除方法
    const addOrDelBtn = (info) => {
        if (info === 'add') {
            if (!keyAndValue) {
                message.warning(`请输入${title}`)
                return false
            }
            //看是否传入正则  传入则校验
            if (AddReg && !AddReg.test(keyAndValue)) {
                message.warning(`${title}格式不正确`)
                return false
            }
            //看添加项列表是否已经含有
            if (keyAndValueList.find(i => i.value === keyAndValue)) {
                message.warning(`请保证输入唯一性：${keyAndValue}`)
                return false
            }
            setKeyAndValueList(state => [...state, {
                key: Math.random()*2,
                value: keyAndValue,
                active: false
            }])
            setKeyAndValue("")
        } else if (info === 'del') {
            keyAndValueList = keyAndValueList.filter(i => i.active === false)
            setKeyAndValueList(_ => [...keyAndValueList])
        }
    }
    //点击改变样式
    const clickLiItem = (liItem) => {
        keyAndValueList.map(i => {
            i.active = false
            if (i.key === liItem) {
                i.active = true
            }
            return i
        })
       // props.getListFun(keyAndValueList)
        setKeyAndValueList(_ => [...keyAndValueList])
    }
     /**
     * keyAndValueList 数据改变一次触发一次
     */
    useEffect(() => {
        props.getListFun(keyAndValueList)
    }, [keyAndValueList])
    /**
     * defaultList 为列表默认值  页面初始化只会设置一次
     */
    useEffect(() => {
        let defaultList = props.defaultList || []
        let newDefaultList = defaultList.map((item, idx) => {
            return {
                value: item,
                key: Math.random()*2,
                active: false
            }
        })
        setKeyAndValueList(_ => newDefaultList)
    }, [props.defaultList])

    return (
        <div className="search-input-row" style={{ display: 'flex', marginLeft: '0px', marginBottom: "10px", alignItems: 'flex-start' }}>
            <RSInput placeholder="请输入" title={title} value={keyAndValue} onChange={e => setKeyAndValue(e.target.value)} />
            <span style={{ marginRight: '50px' }}></span>
            <div>
                <RSButton rsType="noIcon" title="增加>>>" onClick={() => { addOrDelBtn('add') }}></RSButton>
                <br style={{ marginBottom: '30px' }}></br>
                <RSButton rsType="noIcon" color="#108EE9" title="<<<删除" onClick={() => addOrDelBtn('del')}></RSButton>
            </div>
            <span style={{ marginRight: '50px' }}></span>
            <ul className="addOrDelUl" style={{ border: '1px solid #ccc', width: '250px', height: '120px' }}>
                {
                    keyAndValueList.map((item, index) => {
                        return (
                            <li style={{ cursor: "pointer" }} key={item.key + index.toString()} title={item.value} onClick={() => clickLiItem(item.key)} className={item.active ? 'liActive' : ''}
                            >{item.value}
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    )
}

export default memo(LeftOrRightMoveCom)

/**
 *
     <LeftOrRightMoveCom
        getListFun={this.getListFun1}
        defaultList={this.state.NowDataDefault}
        AddReg={new RegExp('(^\\/)([a-z0-9._@\\-\\/]+)([^\\/]$)','i')}
        title="数据备份文件" />


        getListFun1 = (list) => {
        let dataDefault = list.reduce((str, item,index) => {
            // return str +=index!==list.length-1 ? item.value+':' : item.value
            return str = [...str,item.value]
        }, [])
        this.setState({
            dataDefault:dataDefault ? dataDefault : ""
        })
    }

 */

css:

.context{
    width: 100%;
    height: 100%;
}
.addOrDelUlShow{
    overflow: hidden;
    overflow-y: auto;
    border-radius: 4px;
    li{
        list-style: none;
        font-size: 14px;
        padding-left: 10px;
        padding-top: 4px;
        color: black;
        line-height: 18px;
    }
}
.addOrDelUl{
    overflow: hidden;
    overflow-y: auto;
    border-radius: 4px;
    li{
        list-style: none;
        font-size: 16px;
        padding-left: 10px;
        padding-top: 4px;
        color: black;
        line-height: 24px;
    }
    li:hover{
        background-color: #ccc;
    }
    .liActive{
        background-color: #ccc;
        color: #fff;
    }
}
.zoneUpload{
width:100px!important
}
.zonefilechangeInput{
    .rsinput-title{
        width: 30px!important;
        min-width:30px;
    }
}

使用：

  <LeftOrRightMoveCom
      getListFun={this.getListFun1}
      // defaultList={this.state.NowDataDefault}
      defaultList={["数学", "语文", '英语']}
      AddReg={new RegExp('(^\\/)([a-z0-9._@\\-\\/]+)([^\\/]$)', 'i')}
      // title="数据备份文件" />
      title="学习" />

   <LeftOrRightMoveCom
      getListFun={this.getListFun2}
      AddReg={new RegExp('(^\\/)([a-z0-9._@\\-\\/]+)([^\\/]$)', 'i')}
      // defaultList={this.state.NowAppDefault}
      defaultList={["唱歌", "跳舞", '踢足球']}
      // AddReg={/(^[A-Za-z]{1}:\/|^\/)([\w]*\/)*\w+\.{1}[a-zA-Z]+$/}
      title="爱好" />

回调函数拿到最新的list，可以自行处理数据格式

 getListFun1 = (list) => {
        let dataDefault = list.reduce((str, item, index) => {
            // return str +=index!==list.length-1 ? item.value+':' : item.value
            return str = [...str, item.value]
        }, [])
        this.setState({
            dataDefault: dataDefault ? dataDefault : ""
        })
    }
    getListFun2 = (list) => {
        let appDefault = list.reduce((str, item, index) => {
            // return str +=index!==list.length-1 ? item.value+':' : item.value
            return str = [...str, item.value]
        }, [])
        this.setState({
            appDefault: appDefault ? appDefault : ""
        })
    }