You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
92 lines
2.3 KiB
92 lines
2.3 KiB
/*
|
|
* @Description: 知识点
|
|
* @Author: tangjiang
|
|
* @Github:
|
|
* @Date: 2019-12-30 13:51:19
|
|
* @LastEditors : tangjiang
|
|
* @LastEditTime : 2019-12-31 09:06:44
|
|
*/
|
|
import './index.scss';
|
|
import React, { useState, useEffect } from 'react';
|
|
import { Select } from 'antd';
|
|
|
|
const { Option } = Select;
|
|
|
|
function KnowLedge (props) {
|
|
|
|
const {
|
|
options = [], // 下拉选项
|
|
values = [], // 已选择的下拉项
|
|
} = props;
|
|
|
|
useEffect(() => {
|
|
setSelectOptions(options || []);
|
|
}, [props]);
|
|
|
|
// 显示的下拉项
|
|
const [selectOptions, setSelectOptions] = useState(options);
|
|
// 已选择的下拉项
|
|
const [selectValue, setSelectValue] = useState(values);
|
|
//
|
|
const [value] = useState([]);
|
|
|
|
// 渲染下拉选项
|
|
const renderOptions = (options = []) => {
|
|
return options.map((opt, i) => (
|
|
<Option key={`opt_${i}`} value={`${opt.id}`}>{opt.name}</Option>
|
|
));
|
|
}
|
|
// 过滤下拉列表项
|
|
const handleSelectChange = (value) => {
|
|
value = +value.join('');
|
|
const tempArr = [...selectValue];
|
|
const _result = selectOptions.filter(item => {
|
|
if (item.id === value && tempArr.findIndex(t => t.id === value) === -1) {
|
|
tempArr.push(item);
|
|
}
|
|
return item.id !== value;
|
|
});
|
|
setSelectValue(tempArr);
|
|
setSelectOptions(_result);
|
|
}
|
|
|
|
// 渲染下拉结果
|
|
const renderResult = (arrs) => {
|
|
return arrs.map((item) => (
|
|
<div className="knowledge-item" key={`item_${item.name}`}>
|
|
<span className="knowledge-item-txt">{item.name}</span>
|
|
</div>
|
|
));
|
|
}
|
|
// 渲染下拉列表
|
|
const renderSelect = (options) => {
|
|
return (
|
|
<Select
|
|
value={value}
|
|
mode="tags"
|
|
placeholder="请选择"
|
|
style={{ width: '100%' }}
|
|
onChange={handleSelectChange}
|
|
>
|
|
{renderOptions(options)}
|
|
</Select>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className="knowledge-select-area">
|
|
{ renderSelect(selectOptions) }
|
|
{/* 渲染下拉选择项 */}
|
|
<div className="knowledge-result">
|
|
{/* { renderResult(selectValue) } */}
|
|
{/* <div className="knowledge-item">1111</div> */}
|
|
<div className="knowledge-item">
|
|
<span className="knowledge-item-txt">JAVA</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default KnowLedge;
|