Form表单中的Select
封装Select选择器，把select变为受控组件。onChange时设置Select的值。
因为父子组件嵌套较深，所以选择stook管理数据。
使用stook设置select的默认值，添加时为空数组，编辑时判断是否是全选的值或普通值数组。
在Select组件中使用getState获取默认值，使用mutate设置值。
编辑时判断默认值是否是全选，比较了两个数组的值是否每一项都相等。循环所有数据的数组，判断是否所有数据的每一项都在记录的值的数组中，如果是，则是全选。
这里不用把两个数组变成字符串再比较，是因为可能数组元素的值相同，位置不相同。
封装的Select组件：
import React from 'react';
import { Select } from 'antd';
import { getState, mutate } from 'stook';
import { MajorItem } from '@/pages/Content/Dynamic/AddOrEditDynamic/index.config';
const { Option } = Select;
function SelectAllMajor(props: any) {
const majorValue = getState('majorValue');
const { majorList } = props;
const handleChange = (value: any) => {
// 第一个是全选 再选择其他时，去掉全选
// 第一个不是全选 而后再选全选时，只保留全选
// 第一个是全选 且只有全选时，只保留全选
if (value[0] === '0' && value.length > 1) {
const arr = value.filter((item: string) => item !== '0');
mutate('majorValue', arr);
} else if ((value[0] !== '0' && new Set(value).has('0')) || (value[0] === '0' && value.length === 1)) {
mutate('majorValue', ['0']);
} else {
mutate('majorValue', value);
}
};
return (
<Select
value={majorValue}
onChange={handleChange}
allowClear
showSearch
placeholder='请选择发布专业'
style={{ width: 200 }}
mode='multiple'
optionFilterProp='children'
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
<Option key='0' value='0'>
全选
</Option>
{majorList.map((item: MajorItem) => (
<Option key={item.id} value={item.id}>
{item.major_name}
</Option>
))}
</Select>
);
}
export default SelectAllMajor;
父级使用：
<Form.Item
label='发布专业'
name='major_id'
rules={[{ required: true, message: '请选择发布专业' }]}
style={{ display: 'flex' }}
>
<SelectAllMajor {...toSelectAll} />
</Form.Item>
获取表单数据：
const { majorList, allAccountList, recordDynamic } = props;
const [majorValue, setMajorValue] = useStore<string[]>('majorValue', []);
// 编辑时设置专业选项的默认值。SelectAllMajor组件中会改变majorValue
useEffect(() => {
if (recordDynamic && recordDynamic.info && recordDynamic.info.major_id) {
// majorList的每一项是否都在recordDynamic!.info!.major_id中
let isAllMajor = true;
for (let i = 0; i < majorList.length; i++) {
if (recordDynamic!.info!.major_id.split(',').indexOf(majorList[i].id) < 0) {
isAllMajor = false;
}
}
if (isAllMajor) {
setMajorValue(['0']);
} else {
const arr = recordDynamic!.info!.major_id.split(',');
setMajorValue(arr);
}
}
return () => setMajorValue([]);
}, []);
...
// 点击发布
const publishDynamic = async () => {
setBtnPublishLoading(true);
// 设置Form表单的major_id的值，以通过必填的校验
getRef[ActiveKey].current.setFieldsValue({
major_id: majorValue.indexOf('0') >= 0 ? majorList.map((item: MajorItem) => item.id) : majorValue,
});
// 获取ActiveKey对应的内容，验证通过执行.then
getRef[ActiveKey].current
.validateFields()
.then(async (values: any) => {
const topContent = {
...values,
major_id: values.major_id.join(','),
publish_time: values.publish_time.format('YYYY-MM-DD HH:mm:ss'),
};
...
