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

Question

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

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

我的代码很简单，我有一个包含输入和下拉列表的表单，我从输入中获取一个整数，从下拉列表中获取一个值，它通过 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 prop，其中包括它自己 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} />

高级 use-cases, please refer to the docs.

此外，您正在使用 reactstrap 和 here's a discussion 了解如何创建此类自定义下拉组件，该组件适用于 redux-form。

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

Can't get selected value from dropdown

javascript

reactjs

redux

redux-form