如何在休息创建表单上向 admin-on-rest admin 添加复选框并将复选框值发布到后端答案

【问题标题】：How do I add checkboxes to admin-on-rest admin on rest create form and post the checkbox value to backend如何在休息创建表单上向 admin-on-rest admin 添加复选框并将复选框值发布到后端
【发布时间】：2018-02-01 23:50:37
【问题描述】：

我在 admin-on-rest 创建表单中添加了 material-ui/Checkbox 组件，并带有 source 属性。但是在我点击保存按钮后，我在发布的数据中看不到复选框的值。

但我可以在发布的数据中看到“标题”和“正文”字段的值。有人可以告诉，为什么这段代码不起作用？

这是我的示例代码：

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>
    );

【问题讨论】：

需要使用redux-form Field组件stackoverflow.com/questions/48110246/…

标签： admin-on-rest

【解决方案1】：

当然 Checkbox 不是 react-on-admin 组件。请使用BooleanInput

【讨论】：

【解决方案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)

【讨论】：