javascript - Redux 表单不允许编辑初始化表单状态值

Question

我有一个 redux-form 组件，我正确地传入了 initial form state values 但是当我在表单中单击时，我无法编辑这些值。我已关注所有文档，例如以下链接:

Initialize From State

而且我还按照文档实现了自定义 input:

Will redux-form work with a my custom input component?

所以我想弄清楚我错过了什么？这是我的表单组件:

EditJournalForm.jsx

import "./styles/list-item.scss";
import {Button, ButtonToolbar} from "react-bootstrap";
import {connect} from "react-redux";
import {Field, reduxForm} from "redux-form";
import InputField from "../form-fields/InputField";
import PropTypes from "prop-types";
import React from "react";

class EditJournalForm extends React.Component {
    render() {
        //console.log('EditJournalForm this.props', this.props);
        const {closeOverlay, handleSubmit, initialValues, pristine, submitting,} = this.props;

        return (
            <form onSubmit={handleSubmit}>
                <div>                
                    <div className="form-field">
                        <Field
                            component={props =>
                                <InputField
                                    content={{val: initialValues.title}}
                                    updateFn={param => props.onChange(param.val)}                                    
                                    {...props}
                                />
                            }
                            label="Journal title"
                            name="title"
                            type="text"
                        />
                    </div>
                    <div className="form-field">
                        <Field
                            component={props =>
                                <InputField
                                    content={{val: initialValues.description}}
                                    updateFn={param => props.onChange(param.val)}                                    
                                    {...props}
                                />
                            }
                            componentClass="textarea"
                            label="Description"
                            name="description"
                            rows="5"
                            type="text"
                        />
                    </div>
                    <div className="form-button-group">
                        <ButtonToolbar>
                            <Button
                                bsSize="small"
                                style={{"width": "48%"}}
                                onClick={() => {
                                    if (closeOverlay) {
                                        closeOverlay();
                                    }
                                }}
                            >
                                Cancel
                            </Button>
                            <Button
                                bsSize="small"
                                disabled={pristine || submitting}
                                style={
                                    {
                                        "backgroundColor": "#999",
                                        "width": "48%"
                                    }}
                                type="submit"
                            >
                                Add
                            </Button>
                        </ButtonToolbar>
                    </div>
                </div>
            </form>
        );
    }
}

EditJournalForm.propTypes = {
    "closeOverlay": PropTypes.func,
    "handleSubmit": PropTypes.func.isRequired,
    "pristine": PropTypes.bool.isRequired,
    "submitting": PropTypes.bool.isRequired,
    "initialValues": PropTypes.object
};

EditJournalForm.defaultProps = {
    "closeOverlay": undefined
};

export default reduxForm({
    form: "editJournal", 
    enableReinitialize: true
})(connect((state, ownProps) => {
    return {
        initialValues: {
           "title": state.bees.entities.journals[ownProps.journal.id].attributes.title,
           "description": state.bees.entities.journals[ownProps.journal.id].attributes.description,
        }
    };
}, undefined)(EditJournalForm));

这是我的自定义输入:

InputField.jsx

import {ControlLabel, FormControl, FormGroup} from "react-bootstrap";
import PropTypes from "prop-types";
import React from "react";

const InputField = ({input, label, content, updateFn, type, ...props}) => (
    <FormGroup >
        <ControlLabel>
            {label}
        </ControlLabel>
        <FormControl
            {...props}
            {...input}
            value={content}
            onChange={updateFn}
            type={type}
        />
    </FormGroup>
);

export default InputField;

InputField.propTypes = {
    "input": PropTypes.object.isRequired,
    "label": PropTypes.string.isRequired,
    "type": PropTypes.string.isRequired,
    "content": PropTypes.object,
    "updateFn": PropTypes.func
};

Answer 1

尝试调用输入框的onChange函数:

const InputField = ({input, label, content, updateFn, type, ...props}) => (
    <FormGroup>
        <ControlLabel>
            {label}
        </ControlLabel>
        <FormControl
            {...props}
            {...input}
            value={content}
            onChange={(e) => {
                input.onChange(e);
                updateFn(e);
            }}
            type={type}
        />
    </FormGroup>
);