【问题标题】:Input Components Not Working输入组件不工作
【发布时间】:2017-10-02 22:56:09
【问题描述】:

我们正在将 AOR(版本 1.2.3)与现有应用程序集成。 我们正在尝试提供编辑功能,因为当我们提供 组件工作正常 也能看到保存按钮 但 当它 组件 没有 SAVE 按钮可见,组件确实接受输入。

代码何时 使用字段组件

 import React, { Component } from 'react';
import {
Components
} from 'admin-on-rest';
 
 const CustomerEdit = (props) => (
 <Edit {...this.props}>
         <TabbedForm>
           <FormTab label="Profile">
               <TextField source="firstName" />
               <TextField source="middleName" />
               <TextField source="lastName" />
           </FormTab>
           <FormTab label="Address">
           <ReferenceManyField addLabel={false} reference="CustomerAddresses" target="customerProfileId">
               <Datagrid>
               <EditButton/>
                 <TextField source="id" />
                 <TextField source="line1" />
                 <TextField source="pinCode" />
                </Datagrid>
             </ReferenceManyField>
           </FormTab>
            </TabbedForm>
     </Edit>
     );
     export default CustomerEdit;

代码何时 输入 使用组件

import React, { Component } from 'react';
import {
Components
} from 'admin-on-rest';
 
 const CustomerEdit = (props) => (
 <Edit {...this.props}>
         <TabbedForm>
           <FormTab label="Profile">
               <TextInput source="firstName" />
               <TextInput source="middleName" />
               <TextInput source="lastName" />
           </FormTab>
           <FormTab label="Address">
           <ReferenceManyField addLabel={false} reference="CustomerAddresses" target="customerProfileId">
               <Datagrid>
               <EditButton/>
                 <TextInput source="id" />
                 <TextInput source="line1" />
                 <TextInput source="pinCode" />
                </Datagrid>
             </ReferenceManyField>
           </FormTab>
            </TabbedForm>
     </Edit>
     );
     export default CustomerEdit;

这是 App.js

import React from 'react';
import PropTypes from 'prop-types';

// redux, react-router, redux-form, saga, and material-ui
// form the 'kernel' on which admin-on-rest runs
import { combineReducers, createStore, compose, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import createHistory from 'history/createHashHistory'
import { Switch, Route } from 'react-router-dom'
import { ConnectedRouter, routerReducer, routerMiddleware } from 'react-router-redux';
import { reducer as formReducer } from 'redux-form';
import createSagaMiddleware from 'redux-saga';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';


// prebuilt admin-on-rest features
import {
  adminReducer,
  localeReducer,
  crudSaga,
  TranslationProvider,
} from 'admin-on-rest';

import restClient from './restClient';
import GenericList from './ui/List';
import CustomerEdit from './ui/views/customer/customerEdit';

const reducer = combineReducers({
  admin: adminReducer([{ name: 'CustomerProfiles' },
  { name: 'CustomerAddresses' }]),
  locale: localeReducer(),
  form: formReducer,
  routing: routerReducer,
});
const sagaMiddleware = createSagaMiddleware();
const history = createHistory();

const store = createStore(reducer, undefined, compose(
  applyMiddleware(sagaMiddleware, routerMiddleware(history)),
  window.devToolsExtension ? window.devToolsExtension() : f => f,
));

sagaMiddleware.run(crudSaga(restClient));

const App = () => (
  <Provider store={store}>
    <TranslationProvider messages={messages}>
      <ConnectedRouter history={history}>
        <MuiThemeProvider>
          <Switch>
            <Route exact path="/profile"
              hasCreate render={
                (routeProps) => <GenericList resource="CustomerProfiles" {...routeProps} />
              } />
            <Route exact path="/profile/:id"
              hasEdit render={
                (routeProps) => <CustomerEdit resource="CustomerProfiles" {...routeProps} />
              } />
</Switch>
        </MuiThemeProvider>
      </ConnectedRouter>
    </TranslationProvider>
  </Provider>
);

export default App
这在输入组件的情况下 No Data from Backend for CustomerAddress and also no Save Button

在字段组件的情况下

when we use <---FIELD/> Component

【问题讨论】:

  • 你不是缺少adminReducer 中的CustomerAddresses 资源吗?
  • 对不起,我忘了把它放在那里,但是当即使 CustomerAddresses 在那里,输出也不在那里

标签: admin-on-rest


【解决方案1】:

您在控制台中没有关于 ReferenceManyInput 的错误吗?该组件不存在。

我检查了文档,我们确实将它包含在Resources chapter 中。很快就会修复。

要引用许多其他资源,您应该使用 ReferenceArrayInput。但是,它不支持 Datagrids。目前还没有允许您编辑相关资源的组件。

【讨论】:

  • 对不起,它的 ReferenceManyField 只是我忘了提及......我在 中的错误 ReferenceManyField 在我进行 Admin-on-rest 练习项目时工作正常,但当我尝试整合它时不起作用跨度>
  • 您必须更准确地了解“试图整合”
  • 好的,当我在现有应用程序中关注集成部分(CustomApp.js)的文档时,您会看到它无法正常工作......
  • 我希望你已经看到了屏幕截图!!我附上了问题。
  • 啊,我现在明白了。我们的文档尚未针对最新版本进行更新。现在已经更新了。您可能缺少以下行 store.dispatch(declareResources([{ name: 'CustomerProfiles' }]));
猜你喜欢
  • 1970-01-01
  • 2019-06-15
  • 2017-08-21
  • 2014-06-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2015-03-10
相关资源
最近更新 更多