Question

我有一个表单，其中包含一个输入和一个下拉列表，其中包含来自API的元素。但是我有一个问题，每当我提交表单时，它仅传递来自输入的值，而不传递下拉列表。

这很奇怪，因为当我单击表单上的inspect元素时，它表明每个选项都有一个值和一个标签。

我的代码很简单，我有一个带有输入和下拉菜单的表单，我从输入中得到一个整数，并从下拉列表中得到一个值，并且它通过POST请求创建了一个元素，但这在后台发生，因为我仅在此处传递参数。

我将Redux Form库用于表单控件

这是我的代码：

import React from 'react';
import {reduxForm, Field} from 'redux-form';
import {Input} from 'reactstrap';
import {connect} from 'react-redux';
import { renderField } from '../form';
import {ticketAdd} from "../actions/actions";
import {Message} from "./Message";

const mapDispatchToProps = {
    ticketAdd
};

class AmendeForm extends React.Component {

    onSubmit(values) {
        const { ticketAdd, parkingId } = this.props;
        return ticketAdd(parseInt(values.matricule),parkingId,parseInt(values.montant));
    }

    render() {
        const { handleSubmit, submitting, voitureList } = this.props;
        console.log(voitureList);

        if (null === voitureList) {
            return (<Message message="Pas de voitures"/>); 
        }

        return (
            <form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
                <Input type="select" name="matricule" id="exampleSelect" label="Matricule">
                {
                    voitureList.map(voiture => {
                        return ( 
                            <option value={voiture.id} key={voiture.id}>{voiture.matricule}</option>
                        );
                    })
                }  
                </Input>

                <Field name="montant" type="number" label="Montant" component={renderField}/>

                <button type="submit" className="btn btn-primary btn-big btn-block" disabled={submitting}>Ajouter ticket</button>
            </form>
        )
    }
}

export default reduxForm({
    form: 'AmendeForm'
})(connect(null, mapDispatchToProps)(AmendeForm))

Answer 1

这是因为您的下拉列表字段没有被redux-form <Field />组件包裹。

您必须创建一个自定义的下拉组件（将其命名为<Dropdown />），然后按如下所示将其传递给Field：

<Field name='matricule' component={Dropdown} />

请记住，在您的<Dropdown />组件中，您必须使用自定义的Dropdown道具来调整<Field />传递的道具。例如，<Field />将传递input道具，其中包括自身onChange，onBlur和其他处理程序，这些道具也应传递给您的自定义Dropdown。

这是一个如何创建自定义Dropdown组件的基本示例：

const Dropdown = ({ input, label, options }) => (
  <div>
    <label htmlFor={label}>{label}</label>
    <select {...input}>
      <option>Select</option>
      { options.map( o => (
          <option key={o.id} value={o.id}>{o.label}</option> 
        )
      )}
    </select>
  </div>
)

用法

const options = [
  { id: 1, label: 'Example label 1' },
  { id: 2, label: 'Example label 2' }
]

<Field name='marticule' component={Dropdown} options={options} />

对于高级用例，请please refer to the docs。

此外，您正在使用reactstrap和here's a discussion来介绍如何创建与redux-form相适应的自定义Dropdown组件。

无法从下拉列表中选择值

1 个答案: