首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

admin- on -rest in create form -如何根据其他输入值在下拉列表中填充列表

admin-on-rest是一个基于React和Redux的开源框架,用于构建管理界面。它提供了一组可重用的React组件和Redux中间件,使开发人员能够快速构建功能丰富的管理界面。

在admin-on-rest中,创建表单(create form)是一种常见的操作,它允许用户输入数据并将其提交到后端进行处理。在创建表单中,有时需要根据其他输入值来填充下拉列表。

要实现这个功能,可以使用admin-on-rest提供的FormDataConsumer组件。FormDataConsumer组件可以访问表单中其他字段的值,并根据这些值来动态生成下拉列表的选项。

以下是一个示例代码,展示了如何根据其他输入值在下拉列表中填充列表:

代码语言:jsx
复制
import React from 'react';
import { Create, SimpleForm, TextInput, SelectInput, FormDataConsumer } from 'admin-on-rest';

const CreateForm = (props) => (
    <Create {...props}>
        <SimpleForm>
            <TextInput source="name" />
            <SelectInput source="category" choices={[
                { id: '1', name: 'Category 1' },
                { id: '2', name: 'Category 2' },
                { id: '3', name: 'Category 3' },
            ]} />
            <FormDataConsumer>
                {({ formData, ...rest }) => (
                    <SelectInput
                        source="subCategory"
                        choices={getSubCategories(formData.category)}
                        {...rest}
                    />
                )}
            </FormDataConsumer>
        </SimpleForm>
    </Create>
);

const getSubCategories = (category) => {
    // 根据category值获取对应的子类别列表
    // 返回一个包含子类别选项的数组
    // 这里只是一个示例,实际应根据业务逻辑进行处理
    switch (category) {
        case '1':
            return [
                { id: '1', name: 'Subcategory 1.1' },
                { id: '2', name: 'Subcategory 1.2' },
            ];
        case '2':
            return [
                { id: '3', name: 'Subcategory 2.1' },
                { id: '4', name: 'Subcategory 2.2' },
            ];
        case '3':
            return [
                { id: '5', name: 'Subcategory 3.1' },
                { id: '6', name: 'Subcategory 3.2' },
            ];
        default:
            return [];
    }
};

export default CreateForm;

在上述示例中,我们定义了一个CreateForm组件,其中包含一个name字段和一个category字段。根据category字段的值,我们使用FormDataConsumer组件动态生成subCategory字段的下拉列表选项。getSubCategories函数根据category的值返回对应的子类别选项。

这只是一个简单的示例,实际应用中可能需要根据具体业务逻辑进行更复杂的处理。根据实际情况,您可以自定义getSubCategories函数来获取正确的子类别选项。

腾讯云提供了一系列与云计算相关的产品,例如云服务器、云数据库、云存储等。您可以根据具体需求选择适合的产品。您可以访问腾讯云官方网站(https://cloud.tencent.com/)了解更多关于腾讯云产品的信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券