Невозможно получить выбранное значение из выпадающего списка - PullRequest
Новая
       4

Невозможно получить выбранное значение из выпадающего списка

1 голос
/ 16 июня 2019

У меня есть форма, которая содержит входные данные и выпадающий список, который заполнен элементами из 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))

1 Ответ

1 голос
/ 20 июня 2019

Это потому, что ваше поле выпадающего списка не обернуто redux-form <Field /> компонентом.

Вам необходимо создать пользовательский раскрывающийся компонент (назовем его <Dropdown />), а затем передать его в поле следующим образом: 

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

Имейте в виду, что в вашем <Dropdown /> компоненте вы должны адаптировать реквизиты, переданные на <Field />, с помощью ваших собственных реквизитов Dropdown. Например, <Field /> передаст input проп, который включает в себя 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} />

Для расширенных вариантов использования, , пожалуйста, обратитесь к документации .

Кроме того, вы используете reactstrap и , вот обсуждение о том, как создать такой пользовательский выпадающий компонент, который адаптирован с redux-form.

...