我有一个正确输入redux-forminitial 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));





这是我的自定义input

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

最佳答案

尝试调用输入字段的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>
);

10-05 20:26
查看更多