无法从下拉列表中获取选定值答案

【问题标题】：Can't get selected value from dropdown无法从下拉列表中获取选定值
【发布时间】：2019-06-16 14:40:03
【问题描述】：

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

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

我的代码很简单，我有一个包含输入和下拉列表的表单，我从输入中获得一个 int 并从下拉列表中获得一个值，它通过 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))

【问题讨论】：

您使用哪个库来构建表单？您的代码中的handleSubmit 是什么？似乎是负责获取表单的值。
我使用的是redux-form，我不确定HandleSubmit，因为我正在学习教程，它在onSubmit之后绑定了表单中的所有数据，以便我以后可以访问它
您的下拉菜单没有使用任何 redux-form Field，还是我遗漏了什么？

标签： javascript reactjs redux redux-form

【解决方案1】：

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

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

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

请记住，在您的<Dropdown /> 组件中，您必须使用您的自定义下拉道具调整<Field /> 传递的道具。例如，<Field /> 会向下传递 input 属性，其中包括自己的 onChange、onBlur 和其他处理程序，这些也应该传递给您的自定义 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 适配。

【讨论】：