输入组件不工作
Input Components Not Working
我们正在将 AOR(版本 1.2.3)与现有应用程序集成。
我们正在尝试提供编辑功能,因为当我们给
<---Field> 组件工作正常
还可以看到保存按钮
但
当它 <---Input> 组件
没有保存按钮可见,组件确实接受输入。
代码时
使用字段组件
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
控制台中没有关于 ReferenceManyInput
的错误吗?该组件不存在。
我检查了文档,我们确实将其包含在 Resources chapter 中。很快就会修复。
要引用许多其他资源,您应该使用 ReferenceArrayInput。但是,它不支持数据网格。还没有允许您编辑相关资源的组件。
我们正在将 AOR(版本 1.2.3)与现有应用程序集成。 我们正在尝试提供编辑功能,因为当我们给 <---Field> 组件工作正常 还可以看到保存按钮 但 当它 <---Input> 组件 没有保存按钮可见,组件确实接受输入。
代码时 使用字段组件
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
这在字段组件的情况下
when we use <---FIELD/> Component
控制台中没有关于 ReferenceManyInput
的错误吗?该组件不存在。
我检查了文档,我们确实将其包含在 Resources chapter 中。很快就会修复。
要引用许多其他资源,您应该使用 ReferenceArrayInput。但是,它不支持数据网格。还没有允许您编辑相关资源的组件。