web-dev-qa-db-fra.com

ReactJS: Comment encapsuler react-select dans le champ redux-form?

Je travaille sur la bibliothèque react-select et, face à certains problèmes, j'utilise la bibliothèque redux-form et en importe le composant <Field />. Pour que je puisse soumettre les valeurs via le formulaire au service.

Mon problème:

Le code mentionné ci-dessous fonctionne bien lorsque j'utilise le paramètre par défaut de react-select. Je peux pouvoir sélectionner les valeurs du menu déroulant et la valeur sera sélectionnée même lorsque la mise au point sera terminée, la valeur restera. Mais la valeur sélectionnée n'est pas soumise via formulaire à cause de redux-form, c'est pourquoi j'emballe le composant et l'utilise avec <Field name="sample" component={RenderSelectInput} id="sampleEX" options={options} />.

import React from 'react';
import Select from 'react-select';
import RenderSelectInput from './RenderSelectInput'; // my customize select box

var options = [{ value: 'one', label: 'One' }, { value: 'two', label: 'Two' }];


class SelectEx extends React.Component {
    constructor() {
        super();
        this.state = { selectValue: 'sample' }
        this.updateValue = this.updateValue.bind(this);
    }

    updateValue(newValue) {
        this.setState({ selectValue: newValue })
    }

    render() {

        return (
            <div>
                <Select name="select1" id="selectBox" value={this.state.selectValue} options={options} onChange={this.updateValue}/>

                //This works but value won't submit ...

                <Field name="sample" component={RenderSelectInput} id="sampleEX" options={options} />
            //For this, selected value vanishes once I come out of component. 
            </div>
        )
    }
}

export default SelectEx;

Mais lorsque j'utilise avec mon personnalisé, sélectionnez (j'emballe le pour soumettre la valeur à partir du formulaire), le composant <Select> peut être visible dans l'interface utilisateur, même les valeurs également. Mais incapable de sélectionner la valeur dans la liste déroulante ..., si je sélectionne également, il s'affiche dans la zone <Select> mais disparaît au moment de la mise au point. Aidez-moi, s'il vous plaît ...

RenderSelectInput composant:

import React from 'react';
import {Field, reduxForm} from 'redux-form';
import Select from 'react-select';
import 'react-select/dist/react-select.css';


const RenderSelectInput = ({input, options, name, id}) => (

    <div>
        <Select {...input} name={name} options={options} id={id} />
    </div>
)

export default RenderSelectInput;

Merci, Shash

reactjsreduxredux-formreact-bootstrapreact-select
8
shash

Lorsque vous utilisez react-select avec redux-form, vous devez modifier le comportement par défaut des méthodes onChange et onBlur et appeler la méthode onChange et onBlur de redux-form.

Alors, essayez ceci:

const RenderSelectInput = ({input, options, name, id}) => (
    <Select 
         {...input}
         id={id} 
         name={name} 
         options={options}
         value={input.value}
         onChange={(value) => input.onChange(value)}
         onBlur={(value) => input.onBlur(value)}
    />
)

et utiliser le composant ci-dessus comme

<Field component={RenderSelectInput} />

L'appel de la méthode onBlur de redux-form lorsque le focus est supprimé du champ Select empêchera la perte de valeur.

9
Hardik Modha

Ici cela a fonctionné pour moi,

import React, { Component } from 'react';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

export default class RenderSelectInput extends Component {
 onChange(event) {
  if (this.props.input.onChange && event != null) {
   this.props.input.onChange(event.value);
  } else {
   this.props.input.onChange(null);
  }
 }

 render() {
  const { input, options, name, id, ...custom } = this.props;
  return (
   <Select
    {...input}
    {...custom}
    id={id}
    name={name}
    options={options}
    value={this.props.input.value || ''}
    onBlur={() => this.props.input.onBlur(this.props.input.value)}
    onChange={this.onChange.bind(this)}
   />
  );
 }
}

cela a été extrait d'ici: https://ashiknesin.com/blog/use-react-select-within-redux-form/

2
Nadun

Essayez de définir la propriété onBlurResetInput sur false.

Quelque chose comme.

const SelectInput = ({input: { onChange, value }, options, name, id}) => (
    <Select              
      name={name}
      value={value} 
      options={options}
      onChange={onChange}
      onBlurResetsInput={false}
    />
)

J'espère que cela t'aides! 

0
iveedee

Utilisez ceci qui fonctionne parfaitement et il gère également la validation de formulaire redux.

import React, {Component} from 'react';
import Select from 'react-select';
import {FormGroup} from "reactstrap";


class CustomSelect extends Component {

 render() {
   const {meta: {touched, error}} = this.props;
   const className = ` form-group mb-3 ${touched && error ? 'has-danger' : '' }`;
   return (    
        <FormGroup>
                <Select
                      {...this.props}
                       value={this.props.input.value}
                       onChange={(value) => this.props.input.onChange(value)}
                       onBlur={() => this.props.input.onBlur(this.props.input.value)}
                       options={this.props.options}
                       placeholder={this.props.placeholder}
                    />
                    <div className={className}>
                         <div className="text-help">
                              {touched ? error : ''}
                          </div>
                     </div>
           </FormGroup>

            );

Utilisez le composant CustomSelect dans le composant de champ de formulaire redux comme

   <Field
        name='country_name'
        options={this.state.countries}
        component={CustomSelect}
        placeholder="Select your country"
   />
0
Nilanth