#统一修改下拉框问题

zhou zhou

3 小时以前 6103a8e5d2316af7fcf6b246e9e866e5216476f0

 rsf-admin/src/page/components/BasStationSelect.jsx

@@ -1,30 +1,14 @@
import { useState, useEffect } from 'react';
import {
    useTranslate, useNotify, required
    useTranslate, useNotify, required, AutocompleteInput
} from 'react-admin';
import { useController } from 'react-hook-form';
import request from '@/utils/request';
import { Select, MenuItem, FormControl, InputLabel } from '@mui/material';

const BasStationSelect = (props) => {
    const { dictTypeCode, label, name, validate, ...params } = props;
    const translate = useTranslate();
    const notify = useNotify();
    const [list, setList] = useState([]);

    // 使用 useController 与 react-hook-form 集成
    const { field, fieldState } = useController({
        name: name,
        rules: validate ? {
            validate: (value) => {
                for (const rule of validate) {
                    const result = rule(value);
                    if (result) return result;
                }
                return true;
            }
        } : undefined
    });

    useEffect(() => {
        http();
@@ -44,32 +28,21 @@
        }
    };

    const handleChange = (event) => {
        const selectedValue = event.target.value;
        field.onChange(selectedValue);
    };

    const validValue = list.some(item => item.id === field.value) ? field.value : '';

    return (
        <FormControl required fullWidth error={!!fieldState.error}>
            <InputLabel id={`${name}-label`}>{label}</InputLabel>
            <Select
                labelId={`${name}-label`}
                value={validValue}
                variant="filled"
                onChange={handleChange}
                size='small'
            >
                {list.map((item) => (
                    <MenuItem
                        key={item.id}
                        value={item.id}>
                        {item.name}
                    </MenuItem>
                ))}
            </Select>
        </FormControl>
        <AutocompleteInput
            source={name}
            label={label}
            choices={list}
            validate={validate}
            options={{
                ListboxProps: {
                    style: { maxHeight: '200px' }
                },
                ...(params.options || {})
            }}
            fullWidth
            {...params}
        />
    );
};