- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在编辑和显示页面上的 React-admin 项目上创建自定义两列网格布局。我想仅使用一个 <SimpleForm>
在左列上显示选择框和图像上传区域,并在右列上显示文本输入.
如果我使用 div 或 <Card>
<SimpleForm>
下的组件和<EditController>
组件时,我收到错误。
Warning: React does not recognize the `basePath` prop on a DOM element.
If you intentionally want it to appear in the DOM as a custom
attribute, spell it as lowercase `basepath` instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
有什么方法可以创建没有此错误的布局吗?
最佳答案
我通过使用 div 创建另一个组件来解决这个问题,<Grid/>
等等,并在 <SimpleForm>
中使用了该组件组件。
import {withStyles} from '@material-ui/core/styles';
import React from 'react';
import {
EditController,
SimpleForm,
TextInput,
SelectInput,
Title,
} from 'react-admin';
import Grid from '@material-ui/core/Grid';
import Card from '@material-ui/core/Card';
import Poster from "../customField/Poster";
import {EditToolbar} from '../toolbar/CustomToolbar'
import {EditActions} from '../toolbar/CustomActions'
const editStyles = {
root: {display: 'flex', alignItems: 'flex-start', width: '100%'},
form: {flexGrow: 9},
};
class CardEdit extends React.Component {
constructor(props) {
super(props);
this.state = {
refresh: false
};
}
render() {
const FormDiv = withStyles(editStyles)(({children, classes, ...props}) => {
return (
<div className={classes.root}>
<div className={classes.form}>
<Grid container spacing={24}>
<Grid item xs={6}>
<TextInput source="name" fullWidth />
</Grid>
<Grid item xs={6}>
<TextInput source="card_id" fullWidth />
</Grid>
</Grid>
</div>
</div>
)
}
)
return (
<EditController {...this.props}>
{({resource, record, redirect, save, basePath, version}) => {
return (
<div>
<Title defaultTitle="sample"/>
<Card>
<div style={{ margin: '20px 20px 0 0' }}>
<EditActions
basePath={basePath}
resource={resource}
data={record}
hasShow
hasList
/>
</div>
{record && (
<SimpleForm
basePath={basePath}
redirect={redirect}
resource={resource}
record={record}
save={save}
version={version}
toolbar={<EditToolbar/>}
>
<FormDiv record={record} />
</SimpleForm>
)}
</Card>
</div>
)
}}
</EditController>
)
}
}
export default withStyles(editStyles)(CardEdit);
关于reactjs - React-admin 上的 SimpleForm 组件中的自定义布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53278585/
我想隐藏标题开始一个新组。我通过将 visible 设置为 false 来尝试它,并尝试添加自定义 CSS 类。它不起作用。如何在 SimpleForm 中隐藏组标题。 谢谢。 最佳答案 在维护具有控
作为 Storybook 的忠实粉丝,我喜欢在 Isolation 中测试我的组件。 特别是表格。 但是,我很难弄清楚如何才能让我的表单甚至单个表单域独立工作。 (没有编辑、创建、资源和管理包装一切)
我在表格中使用 gem simpleform 我想调整简单表单的每个表单元素的宽度,我可以这样做吗? 我尝试了以下但它似乎不起作用 { :size => 10, :maxlength =>
有没有办法在simple_form View 中显示多态关联? 到目前为止,我得到了以下信息: = simple_form_for(@chat, :html => { :class => "form-
我正在使用 SimpleForm + Bootstrap。如何向所有 type="text" 添加属性输入类 = span12 ? 输出这样的东西: 我试着玩 config.wrappers但是这个
我想在 SimpleForm gem 的帮助下创建的表单上设置输入的 maxlength html 属性。我知道我可以通过在创建表单时手动传入 maxlength 属性来做到这一点,例如: 但这不是
我已经使用 Rails Rails 3.2.12 和 Ruby 2.0.0p0 从我的 Gemfile 中注释掉 gem 'simple_form'。当我执行 rails generate scaff
我想建一个select来自数组(而不是模型集合)的输入,使用 SimpleForm,并且每个 option 都有不同的类s。 我希望这会奏效: f.input :method, collection:
给定一个自定义的 SimpleForm 输入 class MyCustomInput 或 但这不是我要找的。 有没有一种方法可以配置输入,以便默认没有包装器? 最佳答案 除了您在问题中已经提到的选
高度以英寸为单位存储在数据库中。 然而,英尺和英寸需要自己单独的输入形式: Height: [_______] feet [_______] inches 所以我使用了虚拟属性,并让它工作。这是我的模
使用 simple_form gem 和rails,我尝试仅通过按回车键来提交text_area(评论框)。 Facebook 有类似的功能,这就是我的目标。在线研究并没有产生太多成果,而且我对 Ja
我有这段代码: = f.input :category, :as => :select, :label => false, :collection => Choices["Categories"] C
是否可以在没有模型的情况下使用简单表单(由 Plataformatec 提供)? https://github.com/plataformatec/simple_form 最佳答案 您可以使用 :sy
我努力将其消化成一个标题。 我正在使用 SimpleForm 构建一个包含一个或多个字段集的批量编辑页面 - 一个用于已构建但尚未保存的 ActiveRecord 模型集合中的每条记录。 我的表单如下
我使用 simple_form gem 和我有以下代码: = f.label f.object.name 其中 f 是通过 simple_form_for(...) do |f| 创建的 simple
我们有一个模型“EventSession”,它通过 STI 具有多个子类型,包括“NetworkingEventSession”和“DiningEventSession”……在某些情况下,我们希望能够
我有一个使用简单形式的普通形式。现在我想添加一个在模型中没有任何对应字段的输入,它将由 Controller 处理。我试过了 但这给出了一个 Method not found: a
是否可以禁用 AOR SimpleForm 组件的自动完成功能? 我尝试了以下各种组合: 但似乎没有任何效果。 它可以以这种方式定制还是需要创建自己的组件? 我需要它专门用于 AOR(不是 reac
我想在编辑和显示页面上的 React-admin 项目上创建自定义两列网格布局。我想仅使用一个 在左列上显示选择框和图像上传区域,并在右列上显示文本输入. Simply like this 如果我使
我想弄清楚如何设置由 SimpleForm 生成的选择框的选定选项.我的代码是这样的: 当然是default: 1部分不起作用。 TIA 最佳答案 使用以下内容: selected: 1 关于
我是一名优秀的程序员,十分优秀!