web-dev-qa-db-ja.com

ReactJS：反応選択をredux-formフィールドでラップする方法は？

私はreact-selectライブラリに取り組んでおり、いくつかの問題に直面しています。redux-formライブラリを使用し、そこから<Field />コンポーネントをインポートしています。フォームを介してサービスに値を送信できるようにします。

以下のコードは、react-selectのデフォルト<Select>を使用すると問題なく機能します。ドロップダウンから値を選択でき、フォーカスアウトしても値が選択され、値は残ります。しかし、redux-formが原因で、選択した値がフォーム経由で送信されません。そのため、<Select />コンポーネントをラップして<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;

しかし、customized select（フォームから値を送信するためにをラップしています）で使用する場合、<Select>コンポーネントは値でもUIに表示できます。しかし、ドロップダウンから値を選択できません...、私が選択した場合も<Select>ボックスに表示されますが、フォーカスが外れると消えます。私を助けてください ...

RenderSelectInputコンポーネント：

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;
reactjsreduxredux-formreact-bootstrapreact-select
14
shash

Redux-formでreact-selectを使用する場合、onChangeおよびonBlurメソッドのデフォルトの動作を変更し、redux-formのonChangeおよびを呼び出す必要があります。それぞれonBlurメソッド。

だから、これを試してください：

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)}
    />
)

上記のコンポーネントを次のように使用します

<Field component={RenderSelectInput} />

onBlurフィールドからフォーカスが削除されたときにredux-formのSelectメソッドを呼び出すと、値の損失を防ぐことができます。

10
Hardik Modha

ここでこれは私のために働きました、

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)}
   />
  );
 }
}

これはここから抽出されました： https://ashiknesin.com/blog/use-react-select-within-redux-form/

3
Nadun

これを使用して完全に動作し、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>

            );

次のようにReduxフォームフィールドコンポーネントでCustomSelectコンポーネントを使用します。

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

引数なしでonBlurを呼び出さなければなりませんでした。 Hardikの答えの問題は、iPadでは機能しなかったことでした（他のiOSまたはタッチデバイスでも発生する可能性があります。確認できませんでした）。

OnBlurイベントは、iPadのonChangeイベントとともに自動的にトリガーされます。これにより、選択値が初期値にリセットされました。だから私はこのようにonBlurメソッドを呼び出さなければなりませんでした、

onBlur = {（value）=> input.onBlur（）}

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()}
    />
)

そして、

<Field component={RenderSelectInput} />
1
Jithin B

onBlurResetInputプロパティをfalseに設定してみてください。

何かのようなもの。

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

お役に立てれば！

1
iveedee