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

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 />组件，你必须调整 <Field /> 传下来的 Prop 使用您自定义的 Dropdown Prop 。例如，<Field />会传下去input Prop ，包括它自己 onChange , onBlur和其他处理程序，这些也应该传递给您的自定义下拉列表。

下面是一个如何创建自定义下拉组件的基本示例:

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如何创建这样的自定义 Dropdown 组件，它适用于 redux-form .