如何将 "reset values" 按钮添加到 react-admin 编辑表单

Question

有没有办法在 react-admin 表单中添加一个按钮，以便当我单击该按钮时，这些值将重置为已编辑记录的初始值？

我指的不是“取消”按钮（会关闭表单并重定向）。我的意思是一个重置为初始值的按钮，它会丢弃上次保存的任何更改。

Answer 1

与替换“redux-form 'with' react-final-form”相关的新实现：

import React, {
  useCallback,
} from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Button } from 'react-admin'
import { useForm } from 'react-final-form'
import { makeStyles } from '@material-ui/core/styles'
import IconClear from '@material-ui/icons/Clear'

const useStyles = makeStyles(theme => ({
  button: {
    marginLeft: '10px', 
    position: 'relative',
  },
  leftIcon: {
    marginRight: theme.spacing(1),
  },
  icon: {
    fontSize: 18,
  },
}), { name: 'ClearButton' })

const sanitizeRestProps = ({
  basePath,
  invalid,
  pristine,
  //reset,
  saving,
  submitOnEnter,
  handleSubmit,
  handleSubmitWithRedirect,
  undoable,
  onSave,
  ...rest
}) => rest

const ClearButton = ({ className, icon, ...rest}) => {
  const classes = useStyles()
  const form = useForm()

  const handleClick = useCallback(() => {
    form.setConfig('keepDirtyOnReinitialize', false)
    form.reset() 
    form.setConfig('keepDirtyOnReinitialize', true)
  }, [form])

  return (
    <Button
      className={classnames(classes.button, className)}
      onClick={handleClick}
      {...sanitizeRestProps(rest)}
    >
      { icon ? React.cloneElement(icon, { className: classnames(classes.leftIcon, classes.icon) }) : null }
    </Button>
  )
}

ClearButton.propTypes = {
  className: PropTypes.string,
  classes: PropTypes.object,
  icon: PropTypes.element,
}

ClearButton.defaultProps = {
  icon: <IconClear />,
  label: 'Clear',
}

export default ClearButton

如何将 "reset values" 按钮添加到 react-admin 编辑表单

How to add a "reset values" button to a react-admin edit form

react-admin

admin-on-rest