Question

我已使用来源属性在admin-on-rest创建表单中添加了material-ui / Checkbox组件。但是在单击“保存”按钮后，我无法在发布的数据中看到复选框值。

但我可以在发布的数据中看到'title'和'body'字段值。有人可以告诉，为什么这段代码不起作用？

以下是我的示例代码：

export const PostCreate = (props) => (
        <Create {...props} >
            <SimpleForm>
                <TextInput source="title" />
                <LongTextInput source="body" />
                <Checkbox
                    label="Label on the left"
                    labelPosition="left"
                    source="test"
                    value="yes"
                />
    </SimpleForm></Create>
    );

Answer 1

当然Checkbox不是管理员反应组件。请使用BooleanInput

Answer 2

rect-admin中的BooleanInput.js模块Switch被Checkbox取代：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import FormControlLabel from '@material-ui/core/FormControlLabel'
import FormGroup from '@material-ui/core/FormGroup'
import Checkbox from '@material-ui/core/Checkbox'
import { addField, FieldTitle } from 'ra-core'

const sanitizeRestProps = ({
  alwaysOn,
  basePath,
  component,
  defaultValue,
  formClassName,
  initializeForm,
  input,
  isRequired,
  label,
  locale,
  meta,
  options,
  optionText,
  optionValue,
  record,
  resource,
  allowEmpty,
  source,
  textAlign,
  translate,
  translateChoice,
  ...rest
  }) => rest

export class CheckboxInput extends Component {
  handleChange = (event, value) => {
    this.props.input.onChange(value)
  }

  render() {
    const {
      className,
      input,
      isRequired,
      label,
      source,
      resource,
      options,
      ...rest
    } = this.props

    return (
      <FormGroup className={className} {...sanitizeRestProps(rest)}>
        <FormControlLabel
          control={
            <Checkbox
              color="primary"
              checked={!!input.value}
              onChange={this.handleChange}
              {...options}
            />
          }
          label={
            <FieldTitle
              label={label}
              source={source}
              resource={resource}
              isRequired={isRequired}
            />
          }
        />
      </FormGroup>
    )
  }
}

CheckboxInput.propTypes = {
  className: PropTypes.string,
  input: PropTypes.object,
  isRequired: PropTypes.bool,
  label: PropTypes.string,
  resource: PropTypes.string,
  source: PropTypes.string,
  options: PropTypes.object,
}

CheckboxInput.defaultProps = {
  options: {},
}

export default addField(CheckboxInput)

如何在rest create form上向admin-on-rest admin添加复选框，并将复选框值发布到后端

2 个答案: