Question

我正在使用Redux表单。我在下拉列表值方面遇到了一些问题。当我选择某个下拉列表值时，在表单的SubSubmit上没有得到选定的值。

export class AddRecipientForm extends React.Component {
    onSubmit(values) {
        console.log(values)
        const recipient = Object.assign({}, values);
        return this.props.dispatch(addRecipient(recipient));
    }

    render() {
        if (this.props.submitSucceeded === true) {
            return (
                <div>
                    <Redirect to={`/dashboard`} />
                </div>
            );
        }


        return (
            <div>
                <form
                    className="add-recipient-form"
                    aria-label="add new recipient form"
                    onSubmit={this.props.handleSubmit(values => this.onSubmit(values))}>
                    <label htmlFor="name">Name</label>
                    <Field component="input" name="name" type="text" />

                    <label htmlFor="relationship">Relationship</label>
                    <Field component="input" type="text" name="relationship" required />

                    <label htmlFor="occassion">Occassion</label>
                    <Field component="input" type="text" name="occassion" required />

                    <label htmlFor="giftDate">Gift Date</label>
                    <Field component="input" type="date" name="giftDate" required />

                    <label htmlFor="gift">Gift</label>
                    <Field component="input" type="text" name="gift" required />

                    <label htmlFor="budget">Cost</label>
                    <Field component="input" type="number" name="budget" required />

                    <label
                        htmlFor="status">
                        Gift Status
                    </label>
                    <Field component={select} name="status" required>
                        <option value="notPurchased">Not Purchased</option>
                        <option value="purchased">Purchased</option>
                        <option value="gifted">Gifted</option>
                    </Field>

                    <button type="submit">Submit</button>
                    <Link to="/dashboard">
                        <button type="button" aria-label="go back">
                            Back
                        </button>
                    </Link>
                </form>
            </div>
        );
    }
}

AddRecipientForm = reduxForm({
    form: 'addRecipient'
    // onSubmitFail: (errors, dispatch) => {
    //  console.log(`Error: ${JSON.stringify(errors)}`);
    //  dispatch(focus('addRecipient', Object.keys(errors)[0]));
    }
)(AddRecipientForm);


export default AddRecipientForm;

我得到了除下拉值以外的其他值。用select替换了Field，但仍然无法正常工作

Answer 1

最后通过添加默认下拉值解决了该问题。

                        <option key={2333333} value={''}>Please Select</option>

但是仍然想知道为什么它需要默认下拉列表

选定的下拉列表值未填充

1 个答案: