Как добавить кнопку «Сбросить значения» в форму редактирования реакции-администратора - PullRequest
Новая
       34

Как добавить кнопку «Сбросить значения» в форму редактирования реакции-администратора

0 голосов
/ 16 октября 2019

Есть ли способ иметь кнопку в форме реагирования администратора, чтобы при нажатии кнопки значения сбрасывались до исходных значений отредактированной записи?

Я не имею в виду кнопку "Отмена"(что бы закрыть форму и перенаправить). Я имею в виду кнопку сброса к начальным значениям, которая отменяет любые изменения с последнего сохранения.

1 Ответ

0 голосов
/ 16 октября 2019

Вы можете отправить reset () из любого подключенного компонента: https://redux -form.com / 6.0.0-alpha.4 / docs / faq / howtoclear.md / 

import {reset} from 'redux-form';
import {REDUX_FORM_NAME} from 'react-admin';

dispatch(reset(REDUX_FORM_NAME));

Возможная реализация кнопки: 

// ClearButton.js:

import React from 'react'
import PropTypes from 'prop-types'
import classnames from 'classnames'
import { Button } from 'react-admin'
import { connect } from 'react-redux'
import { reset } from 'redux-form'
import IconClear from '@material-ui/icons/Clear'
import { REDUX_FORM_NAME } from 'ra-core'

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

const ClearButton = ({ className, classes = {}, icon, reset, ...rest}) => {
  const handleClick = () => reset(REDUX_FORM_NAME)

  return (
    <Button
      className={classnames(classes.button, className)}
      onClick={handleClick}
      {...sanitizeRestProps(rest)}
    >
      {icon}
    </Button>
  )
}

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

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

export default connect(null, { reset })(ClearButton)

Использование ClearButton: 

const CustomToolbar = ({ pristine, ...props }) => (
  <Toolbar {...props} >
    <SaveButton submitOnEnter={true} size="large" />   
    <ClearButton disabled={pristine} size="large" />
  </Toolbar>
)
...