Question

我正在使用react-select库并面临一些问题，我正在使用redux-form库并从中导入<Field />组件。这样我就可以通过表单将值提交给服务了。

我的问题：

当我使用react-select的默认值时，下面提到的代码工作正常。我可以从下拉列表中选择值，即使在聚焦时也会选择该值，该值将保留。但由于redux-form因为我正在使用<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;

但是当我使用自定义选择（我正在包装以从表单提交值）时，<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;

谢谢，词shash

Answer 1

将react-select与redux-form一起使用时，您需要更改onChange和onBlur方法的默认行为，并调用redux-form的{{1}分别和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} />字段移除焦点后，调用redux-form的{{1}}方法可防止价值损失。

Answer 2

这对我有用，

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/

Answer 3

使用此功能非常有效，它还可以处理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"
   />

Answer 4

我必须不带任何参数地呼叫 onBlur 。 Hardik回答的问题是，它在iPad中不起作用（可能也在其他iOS或触摸设备中。我无法检查）。

onBlur事件与iPad中的onChange事件一起自动触发。这导致选择值重置为其初始值。所以我不得不像这样调用onBlur方法，

onBlur = {（值）=> 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} />

Answer 5

尝试将onBlurResetInput属性设置为false。

类似的东西。

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

希望这有帮助！

ReactJS：如何在redux-form字段中包装react-select？

5 个答案: