Question

我有一个redux-form组件，我在initial form state values中正确传递但是当我在表单中单击时，我无法编辑值。我已经按照以下链接的所有文档：

我还遵循文档来实现自定义input：

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

所以我想弄明白我错过了什么？这是我的表单组件：

EditJournalForm.jsx

＆＃13;

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));

＆＃13;

这是我的自定义input：

InputField.jsx

＆＃13;

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
};

＆＃13;

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>
);

Answer 2

我发现至少有一个问题 - 您将content道具指定为具有val属性的对象，但在您的自定义InputField中，您正在设置value={content} ，这实际上是{ val: 'the value' }的对象，而不是实际值（本例中的'值'）。

使用redux-form，无需从initialValues手动分配。通过在name上设置Field属性，系统会为您正确分配该属性。

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

2 个答案: