Question

我有一个表单，为了简单起见，在下面发布了其中的大部分内容，我需要使用redux存储中的值进行初始化。

我已经将道具从redux存储区映射到组件（在props.initialValues中），但是它不会设置表单的初始状态。

此外，当我尝试在表单的文本框中键入内容时，它不会让我键入任何内容。

我正在使用@material-ui/core中的表单元素。要查看完整的代码而没有任何删节，可以查看here。

如何初始化表格中的值？

class FormSpellEdit extends Component {
    constructor(props) {
        super(props);

        this.state = {
            Name: 'NoName',
            School: 'NoSchool',
            Subschool: 'NoSubschool',
        };
    }

    render() {
        const {classes} = this.props;

        const renderTextField = ({
            input,
            label,
            ...custom
        }) => (
            <TextField
                hintText={label}
                label={label}
                floatingLabelText={label}
                {...input}
                {...custom}
            />
        );

        return (
            <form
                onSubmit={this.onSubmit}
                initialValues={this.props.page.spell}
                >

                <Grid fluid>
                    <Row>
                        <Col xs={4} >
                            <Field
                                fullWidth
                                initialValue={this.state.Name}
                                name="Name"
                                component={renderTextField}
                                label="Spell Name"
                            />
                        </Col>
                        <Col xs={4} >
                            <Field
                                fullWidth
                                name="School"
                                component={renderTextField}
                                label="Spell School"
                            />
                        </Col>
                        <Col xs={4} >
                            <Field
                                fullWidth
                                name="Subschool"
                                component={renderTextField}
                                label="Spell Subschool"
                            />
                        </Col>
                    </Row>
                </Grid>

            </form>
        );
    }
}

const mapStateToProps = (state, props) => {
    return {
        user_id: userId(state),
        initialValues: state.spell,
        formValues: getFormValues(props.form)(state),
    }
};

const mapDispatchToProps = (dispatch) => {
    return {
    }
};


export default compose(
    reduxForm({
        form: 'SpellEditForm',
    }),
    connect(
        mapStateToProps,
        mapDispatchToProps,

    ),
    withStyles(styles, {
            withTheme: true
        },
    ))(FormSpellEdit);

Answer 1

尝试在之前添加reduxForm，名称必须匹配

export default compose(
        connect(
            mapStateToProps,
            mapDispatchToProps,

        ),
        reduxForm({
            form: 'SpellEditForm',
        }),

        withStyles(styles, {
                withTheme: true
            },
        ))(FormSpellEdit);

从商店反应Redux Form设置初始值？

1 个答案: