Question

我正在尝试以redux形式动态填充选择菜单。我一直在使用chrome中的调试工具，可以看到'departments'变量看到了数组列表

（{{departments.map(department => <option key={department} value={department}>{department}</option>)}

，但最终选择列表未填充。我猜想它与renderSelectField函数有关，但是我不确定我要忽略什么？

        import React, { Component } from 'react';
        import { Field, reduxForm } from 'redux-form';
        import { connect } from 'react-redux';
        import isValidEmail from 'sane-email-validation';

        class SimpleReduxForm extends Component {
            constructor(props) {
                super(props);
                this.onSubmit = this.onSubmit.bind(this);
                this.renderSelectField = this.renderSelectField.bind(this);
            }

            onSubmit = async (data) => {
                try {
                    let response = await fetch('/api/getRecords', {
                        method: 'POST',
                        body: JSON.stringify(data),
                        headers: {
                            'Content-type': 'application/json'
                        }
                    });
                    let responseJson = await response.json();
                    //display success message to user 
                    alert('Form successfully submitted')
                    return responseJson;
                    //reset form

                } catch (error) {
                    alert(error);
                }
            }

            renderInputField(field) {
                return (
                    <div className="form-group">
                        <label htmlFor={field.input.name}>{field.label}</label>
                        <div className="field">
                            <input placeholder={field.label} {...field.input} className="form-control" type={field.input.type} />
                        </div>
                    </div>
                )
            }

            renderSelectField(field) {
                return (
                    <div className="form-group">
                        <label htmlFor={field.input.name}>{field.label}</label>
                        <div className="field">
                            <select {...field.input}
                                className="form-control"
                                defaultselection={field.defaultSelection}
                            ><option>{field.defaultselection}</option></select>
                        </div>
                    </div>
                )
            }

            render() {
                const { handleSubmit, pristine, reset, submitting, invalid } = this.props;
                //Options for select - this should be an AJAX call to a table to get options list

                const departments = ["Dept 1", "Dept 2", "Dept 3"]

                return (
                    <form onSubmit={handleSubmit(this.onSubmit)}>
                        <Field
                            label="Username"
                            name="username"
                            component={this.renderInputField}
                            type="text"
                        />
                        <Field
                            label="Email"
                            name="email"
                            component={this.renderInputField}
                            type="email"
                        />
                        <Field
                            label="Age"
                            name="num_field"
                            component={this.renderInputField}
                            type="text"
                        />
                        <Field
                            label="Department"
                            name="department"
                            defaultselection="Select..."
                            component={this.renderSelectField}>
                            {departments.map(department => <option key={department} value={department}>{department}</option>)}
                        </Field>
                        <div>
                            <button type="submit" className="btn btn-primary" disabled={pristine || submitting}>Submit</button>
                            <button type="button" className="btn btn-warning" disabled={pristine || submitting} onClick={reset}> Clear Values </button>
                        </div>
                    </form >
                )
            }
        }
        //Validate Errors Before Submission
        const validate = (values) => {
            //create errors object
            const errors = {}

            /*Example showing to check is a field contains data
            * if no, submission == invalid*/
            if (!values.username) {
                errors.username = 'Required!'
            }

            /*check to see if email is provided and that submission is an actual email address*/
            if (!values.email) {
                errors.email = 'Required!'
            } else if (!isValidEmail(values.email)) {
                errors.email = 'Invalid Email!'
            }

            /* Example to show that the length of a field
            * can be checked as part of validation */
            if (values.num_field < 2) {
                errors.num_field = "Must be at least 10 years old"
            }

            return errors
        }

        const mapStateToProps = state => ({
            SimpleReduxForm: state.form.SimpleReduxForm
        });

        export default reduxForm({
            validate,
            form: 'SimpleReduxForm',
            enableReinitialize: true,
            keepDirtyOnReinitialize: true,
        })(connect(mapStateToProps)(SimpleReduxForm));

Answer 1

我知道了。以防万一其他人遇到这个问题。我需要将{field.children}添加到renderSelectField函数中。因此，最终功能如下：

     renderSelectField(field) {
            return (
                <div className="form-group">
                    <label htmlFor={field.input.name}>{field.label}</label>
                    <select {...field.input}
                        className="form-control"
                        defaultselection={field.defaultSelection}
                    ><option>{field.defaultselection}</option>{field.children}</select>
                </div>
            )
        }

无法动态呈现Redux表单选择输入选择

1 个答案: