Используя 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))