Обновление значения формы с использованием redux-form-material-ui - PullRequest
0 голосов
/ 28 апреля 2018

Используя material-ui@next и redux-form-material-ui@5.0.0-beta2 Я создал диалог и форму для отображения значений, которые мне нужно отредактировать. Значения формы заполнены, но я не могу понять, как обновить значение поля формы при изменении. Я пытался использовать initialValues для своей формы, но, кроме того, что они отображаются в props, они, похоже, не имеют эффекта.

Я знаю, что приведенный ниже код - это что-то вроде собачьего завтрака, я ломал кусочки, пытаясь обновить глупое поле формы. Я действительно не уверен, как правильно обращаться с заполнением форм в React, и я не нашел хорошего примера в Интернете. Есть ли в сети пример, которым кто-то может поделиться, который демонстрирует данные загрузки формы, использующие redux-form-material-ui Я был бы очень рад это увидеть.

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
import { withStyles } from 'material-ui/styles'
import Button from 'material-ui/Button'
import Dialog, {
  DialogActions,
  DialogContent,
  DialogContentText,
  DialogTitle,
} from 'material-ui/Dialog'
import { TextField } from 'redux-form-material-ui'

const styles = theme => ({
  textField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
  },
  commentField: {
    marginLeft: theme.spacing.unit,
    marginRight: theme.spacing.unit,
    paddingRight: theme.spacing.unit,
  },
})

const propTypes = {
  classes: PropTypes.object.isRequired,
  open: PropTypes.bool.isRequired,
  commentData: PropTypes.object,
  body: PropTypes.string.isRequired,
  onCancel: PropTypes.func.isRequired,
  onSubmit: PropTypes.func.isRequired,
}

class CommentDialog extends Component {

  renderAuthorField = () => {
    const { classes, comments, selectedCommentId } = this.props

    const data = (comments) ? comments[selectedCommentId] : undefined
    const author = data ? data.author : ''

    return (
      <TextField
        margin="normal"
        id="author"
        className={classes.textField}
        label="Author"
        type="text"
        fullWidth
        disabled={true}
        value={author}
      />
    )
  }

  renderBodyField = ({ input, children, ...custom }) => {
    const { classes, comments, selectedCommentId } = this.props

    const data = (comments) ? comments[selectedCommentId] : undefined
    const body = data ? data.body : ''

    return (
      <TextField
        margin="normal"
        id="body"
        label="Comment"
        className={classes.commentField}
        type="text"
        multiline={true}
        rows={4}
        rowsMax={8}
        fullWidth
        value={body}
        onChange={this.updateBody}
      />
    )
  }

  updateBody = (event) => {
    // can't get this to do anything
  }

  render() {
    const {
      open,
      handleSubmit,   // This is added by redux-form
      onSubmit,
      onCancel,
      comments,
      selectedCommentId,
    } = this.props

    const data = (comments) ? comments[selectedCommentId] : undefined

    return (
      <Dialog
        open={open}
        onClose={onCancel}
        aria-labelledby="form-dialog-title"
      >
        <form onSubmit={handleSubmit(onSubmit)}>
          <DialogTitle id="form-dialog-title">
            'Edit Comment'
          </DialogTitle>
          <DialogContent>
            <DialogContentText>
              'Modify the post content.'
            </DialogContentText>
            <Field
              name="author"
              component={this.renderAuthorField}
            />
            <Field
              name="body"
              component={this.renderBodyField}
            />
          </DialogContent>
          <DialogActions>
            <Button onClick={onCancel} color="primary">
              Cancel
            </Button>
            <Button type="submit" color="primary">
              Submit
            </Button>
          </DialogActions>
        </form>
      </Dialog>
    )
  }
}

CommentDialog.propTypes = propTypes

const selector = formValueSelector('comment')

CommentDialog = connect(state => ({
  comment: selector(state, 'comment'),
  comments: state.comments.commentsByPost,
  selectedCommentId: state.comments.selectedCommentId,
}))(CommentDialog)

export default reduxForm({
  form: 'comment',
  fields: ['author', 'body'],
  initialValues: { author: '', body: '' }
})(withStyles(styles)(CommentDialog))
...