react-admin 相关问题

这是我的组件：这是我的组件： <ReferenceInput alwaysOn label="Start Code" source="start_code" reference="products" sort={{ field: "products.code", order: "ASC" }} perPage={10} enableGetChoices={({ code }) => { return !!code; }} > <AutocompleteInput optionValue="code" // <= because of this attribute optionText="code" variant="outlined" filterToQuery={(searchText) => { return { code: searchText }; }} /> </ReferenceInput> 我将该组件放入数组中作为 <List /> 组件的过滤器。从开始代码中选择一个项目后，我进入其他菜单，然后返回。因为 <List /> 的默认行为是将列表参数（排序、分页、过滤器）存储在 localStorage 中，以便用户可以返回列表并以与离开时相同的状态找到它，我们期望之前选择的内容每当用户返回组件时，Start Code组件中的项目都会自动再次选择，但事实并非如此。我发现了，这是因为我将 optionValue 属性设置为“code”，而默认值为“id” 如果我删除这一行optionValue="code"它会起作用有人知道如何解决这个问题吗？谢谢要解决将 ReferenceInput 属性设置为“code”时 React-admin 列表过滤器中 optionValue 组件的问题，您可以使用 getOptionValue 组件的 AutocompleteInput 属性来指定一个自定义函数从所选选项中提取值。方法如下： <ReferenceInput alwaysOn label="Start Code" source="start_code" reference="products" sort={{ field: "products.code", order: "ASC" }} perPage={10} enableGetChoices={({ code }) => { return !!code; }} > <AutocompleteInput optionText="code" variant="outlined" filterToQuery={(searchText) => { return { code: searchText }; }} getOptionValue={(option) => option.code} // Use a custom function to extract the value /> </ReferenceInput>

reactjs react-admin

回答 1 投票 0

为什么编辑无法使用自定义 dataProvider 来进行反应管理

我正在使用react-admin库问题是我不确定问题是什么，但编辑按钮不起作用。我试过用户列表组件导入{列表、数据网格、文本字段、编辑按钮、删除按钮}

javascript reactjs react-admin dataprovider

回答 1 投票 0

在react-admin中管理多对多关系

React-admin企业版提供了一个名为ra-relationships的模块。这使得能够在界面中处理多对多关系。我正在构建一个应用程序，其用户和角色为

many-to-many react-admin

回答 1 投票 0

是否可以对react-admin库创建的表单使用Formik验证？

我是新手，刚刚开始在我的一个项目中使用react-admin 库。我找不到任何地方使用 formik 和反应管理表单。那么是否可以通过react-admin使用formik验证...

reactjs formik react-admin

回答 1 投票 0

更改 React admin 中 ArrayInput 字段中的“删除图标”功能？

我想编写自己的删除图标的函数。默认情况下，单击该图标时， TextInput 将消失。我想在单击该图标时执行一些额外的操作。这是我的代码：我想编写自己的删除图标的函数。默认情况下，单击该图标时， TextInput 将消失。我想在单击该图标时执行一些额外的操作。这是我的代码： <ArrayInput source="items"> <SimpleFormIterator > <FormDataConsumer> {({ scopedFormData = {}, getSource, ...rest }) => { <TextInput source="name"} />} </FormDataConsumer> </SimpleFormIterator> </ArrayInput> 是的，您应该能够将自己的 removeButton 传递给 <SimpleFormIterator>。你可以看看react-admin提供的以获得灵感： https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/ArrayInput/RemoveItemButton.tsx#L14

reactjs react-admin

回答 1 投票 0

React-admin，如何使用react-admin创建表单并获取表单值？

我是react-admin的新手，找不到任何可靠的示例来创建简单的表单并提交值。我正在遵循他们自己的文档，但无法获取获取表单值的语法。

react-admin

回答 1 投票 0

如何禁用react-admin的自动刷新功能

所以react-admin似乎有一个功能，如果你闲置了一段时间然后回来，它会重新加载数据，大概是为了确保你正在查看最新版本的reco。 ..

javascript reactjs react-admin

回答 3 投票 0

react-admin 在GetOne 之前添加 url-query-parameters

我有一个反应管理应用程序。这里我有一个组件：导出 const UserEdit = (props) => { const 值 = useContext(AppContext); 返回（我有一个反应管理应用程序。这里我有一个 <Edit> 组件： export const UserEdit = (props) => { const value = useContext(AppContext); return ( <div className="container-lg px-0 pb-1"> <Edit queryOptions={{ meta: { customerId: value.selectedCustomer.id } }} mutationOptions={{ meta: { customerId: value.selectedCustomer.id } }}> <SimpleForm /*toolbar={<EditToolbar />}*/> <Stack direction="row" spacing={2}> <Stack direction="column"> <TextInput source="id" required disabled /> <TextInput source="first_name" required /> <TextInput source="last_name" required /> <TextInput source="email" type="email" required disabled /> <PreferredLanguageField {...props} /> </Stack> <Stack direction="column"> <FormDataConsumer> {({ formData, ...rest }) => ( <> <BooleanInput source="active_customer_membership.user_access_manager" label="Can manage users" disabled={value.user.id == formData.id} /> <UserRoleInput {...props} disabled={value.user.id == formData.id} /> <UserAccessInput {...props} formData={formData} disabled={value.user.id == formData.id} /> </> )} </FormDataConsumer> </Stack> </Stack> </SimpleForm> </Edit> </div> ); }; 在 Main 中我有一个 dataProvider: const baseDataProvider = restProvider('../../api/user_access_management/v01', fetchUtils.fetchJson); export const dataProvider = withLifecycleCallbacks(baseDataProvider, [ { resource: 'users', beforeGetList: async (params, dataProvider) => { params.filter.customer_id = params.meta.customerId; return params }, afterGetList: async (result, dataProvider) => { // Format the retrieved data to the correct format for react-admin. return { data: result.data.users, total: result.total }; }, beforeGetOne: async (params, dataProvider) => { return params }, afterGetOne: async (result, dataProvider) => { return { data: result.data.user }; }, beforeUpdate: async (params, dataProvider) => { params.data = { user: DataHelper.formUser(params.data, params.meta.customerId) }; return params; }, afterUpdate: async (result, dataProvider) => { return { data: result.data.user }; }, beforeCreate: async (params, dataProvider) => { params.data = { user: DataHelper.formUser(params.data, params.meta.customerId), }; return params; }, afterCreate: async (result, dataProvider) => { return { data: result.data.user }; }, }, ]); 以及App是如何初始化的： const Main = (props) => { const [customer, setCustomer] = useState(props.props.customer); useEffect(() => { setCustomer(props.props.customer); }, [props.props.customer]); const [customers, setCustomers] = useState(props.props.customers); useEffect(() => { setCustomers(props.props.customers); }, [props.props.customers]); const [user, setUser] = useState(props.props.user); useEffect(() => { setUser(props.props.user); }, [props.props.user]); const [selectedCustomer, setSelectedCustomer] = useState(props.props.customers[0]); useEffect(() => { setSelectedCustomer(props.props.customers[0]); }, [props.props.selectedCustomer]); return ( <AppContext.Provider value={{ customer: customer, customers: customers, user: user, selectedCustomer: selectedCustomer, setSelectedCustomer: setSelectedCustomer }}> <Admin dataProvider={dataProvider} layout={CustomLayout}> <Resource name="users" list={<UserList />} edit={<UserEdit />} create={<UserCreate />} /> </Admin> </AppContext.Provider> ); } export default Main; 我现在的问题是，对于 Create / Update，我可以添加 customer_id 作为发送到后端的字段（它们是 POST / PUT 请求）。与 GetList 相同，这里我可以添加 customer_id 作为过滤器：params.filter.customer_id = params.meta.customerId; 但是，我还需要后端的 customer_id 来处理 GetOne 请求。 <Edit> 组件具有 queryOptions={{ meta: { customerId: value.selectedCustomer.id } }}，我在 beforeGetOne 回调中看到了这一点。但是，将其添加到过滤器（就像我对 GetList 所做的那样）似乎不起作用。如何将查询参数添加到 GetOne 请求的 URL 中？ restProvider，我假设您从 ra-data-simple-rest 获得，不支持将过滤器传递给 getOne，因为它是非标准的（在大多数实现中，id 就是您获得单条记录）。您可能需要手动构建 HTTP 请求（使用 fetch）。或者，您可以将 customerId 作为自定义 HTTP 标头传递，但随后您的 API 需要知道如何使用它。最后，您还可以选择覆盖 dataProvider 的 getOne 实现，让它使用过滤器调用 getList，并仅返回第一个结果。关于对delete的调用，您需要将自定义的toolbar传递给您的<SimpleForm>，并在其中包含一个自定义的<DeleteButton>，您可以在其上传递mutationOptions。 PS：如果您使用customerId作为构建多租户应用程序的方式，请务必阅读多租户单页应用程序：注意事项以避免最常见的错误.

javascript httprequest react-admin

回答 1 投票 0

react-admin 相关问题

最新问题