Laravel Inertia JS+React JS实现车牌选择自动填充表单功能求助

完全可以实现，以下是结合你现有代码的具体实现方案：

方案1：基于本地传递的数据自动填充 #

如果你的datas props已经包含了所有车牌对应的车型等关联数据，可通过监听车牌字段变化来匹配填充：

export default function CreateExitsCustomer({ datas }) {
    const [notify, setNotify] = useState(false);
    const { data, setData, processing, post, errors, register, watch } = useForm({
        no_plate: "",
        model: "",
        last_service_date: "",
        service_date: "",
        owner: "",
        mobile_phone: "",
        birthday: "",
        description: "",
    });

    // 监听车牌字段的变化
    const currentPlate = watch('no_plate');
    useEffect(() => {
        if (!currentPlate) return;

        // 从datas中匹配对应的车辆数据
        const matchedVehicle = datas.find(item => item.no_plate === currentPlate);
        if (matchedVehicle) {
            // 更新表单关联字段
            setData({
                ...data,
                model: matchedVehicle.model,
                last_service_date: matchedVehicle.last_service_date,
                owner: matchedVehicle.owner,
                mobile_phone: matchedVehicle.mobile_phone,
                birthday: matchedVehicle.birthday
            });
        } else {
            // 无匹配数据时清空关联字段（可选操作）
            setData({
                ...data,
                model: "",
                last_service_date: "",
                owner: "",
                mobile_phone: "",
                birthday: ""
            });
        }
    }, [currentPlate, datas, data, setData]);

    // 你的其余组件代码...
}

方案2：异步请求后端接口获取数据 #

如果车牌数据量较大或需要实时从后端拉取最新数据，可在车牌变化时调用Laravel接口：

第一步：Laravel端添加接口路由 #

// routes/api.php
Route::get('/vehicles/{no_plate}', [VehicleController::class, 'getByPlate']);

第二步：编写Laravel控制器方法 #

// app/Http/Controllers/VehicleController.php
public function getByPlate($no_plate)
{
    $vehicle = Vehicle::where('no_plate', $no_plate)->first();
    return response()->json($vehicle);
}

第三步：React组件中发起异步请求 #

import axios from 'axios';

export default function CreateExitsCustomer({ datas }) {
    const [notify, setNotify] = useState(false);
    const { data, setData, processing, post, errors, register, watch } = useForm({
        no_plate: "",
        model: "",
        last_service_date: "",
        service_date: "",
        owner: "",
        mobile_phone: "",
        birthday: "",
        description: "",
    });

    const currentPlate = watch('no_plate');
    useEffect(() => {
        if (!currentPlate) return;

        // 发起请求获取车辆数据
        axios.get(`/api/vehicles/${currentPlate}`)
            .then(response => {
                const vehicle = response.data;
                if (vehicle) {
                    setData({
                        ...data,
                        model: vehicle.model,
                        last_service_date: vehicle.last_service_date,
                        owner: vehicle.owner,
                        mobile_phone: vehicle.mobile_phone,
                        birthday: vehicle.birthday
                    });
                }
            })
            .catch(() => {
                // 请求失败时清空关联字段
                setData({
                    ...data,
                    model: "",
                    last_service_date: "",
                    owner: "",
                    mobile_phone: "",
                    birthday: ""
                });
            });
    }, [currentPlate, data, setData]);

    // 你的其余组件代码...
}

注意事项 #

• 确保datas或后端返回的数据结构包含你需要填充的字段，若字段名不符需同步调整代码中的对应字段。
• 若车牌是输入框而非下拉选择，可添加防抖处理（比如用setTimeout延迟请求），减少不必要的接口调用。
• 异步请求场景下，记得处理请求失败的情况，避免表单状态异常。

内容的提问来源于stack exchange，提问作者Aditya Budi