ReactJS：如何在redux表单字段中包装react select？

我正在处理

react select

库，面对一些问题，我正在使用

redux表单

库并从中导入

组件。这样我就可以通过表单将值提交给服务

当我使用react select中的default

时，下面提到的代码工作正常。我可以从下拉列表中选择值，即使在调焦时也会选择该值，该值仍会保留。但是由于

redux表单

的原因，选择的值没有通过表单提交，这就是我包装

组件并与

一起使用的原因

从“React”导入React；
从“反应选择”导入选择；
从“./RenderSelectInput”导入RenderSelectInput；//我的自定义选择框
var options=[{value:'one'，label:'one'}，{value:'two'，label:'two'}]；
类SelectEx扩展了React.Component{
构造函数（）{
超级（）；
this.state={selectValue:'sample'}
this.updateValue=this.updateValue.bind（this）；
}
updateValue（newValue）{
this.setState（{selectValue:newValue}）
}
render（）{
返回(
//这是可行的，但价值不会提交。。。
//为此，一旦我从组件中出来，选定的值就会消失。
)
}
}
导出默认SelectEx；

但是，当我与我的自定义选择一起使用时（我正在包装以从表单提交值），

组件在UI中可见，甚至值也可见。但无法从下拉列表中选择值…，如果我同时选择，它将显示在

框中，但在调焦时消失。请帮帮我

渲染选择输入组件：

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;

从“React”导入React；
从“redux form”导入{Field，reduxForm}；
从“反应选择”导入选择；
导入“react-select/dist/react-select.css”；
const RenderSelectInput=（{input，options，name，id}）=>(
)
导出默认RenderSelectInput；

当使用

react select

和redux表单时，您需要更改

onChange

和

onBlur

方法的默认行为，并分别调用

redux表单

的

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

constrenderselectinput=（{input，options，name，id}）=>(
input.onChange（值）}
onBlur={（值）=>input.onBlur（值）}
/>
)

并使用上述组件，如

<Field component={RenderSelectInput} />

---

当焦点从

Select

字段中移除时，调用

redux form

的

onBlur

方法将防止值丢失。

尝试将

onBlurResetInput

属性设置为false

差不多

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

const SelectInput=（{input:{onChange，value}，options，name，id}）=>(
)

---

希望这有帮助

这对我来说很有效

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

import React，{Component}来自'React'；
从“反应选择”导入选择；
导入“react-select/dist/react-select.css”；
导出默认类RenderSelectInput扩展组件{
onChange（事件）{
if（this.props.input.onChange&&event！=null）{
this.props.input.onChange（event.value）；
}否则{
this.props.input.onChange（null）；
}
}
render（）{
const{input，options，name，id，…custom}=this.props；
返回(
this.props.input.onBlur（this.props.input.value）}
onChange={this.onChange.bind（this）}
/>
);
}
}

---

这是从这里提取的：

使用它，它可以完美地工作，还可以处理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>

            );

import React，{Component}来自'React'；
从“反应选择”导入选择；
从“reactstrap”导入{FormGroup}；
类CustomSelect扩展组件{
render（）{
const{meta:{toucted，error}}=this.props；
const className=`form group mb-3${moved&&error？'has danger'：'}`；
报税表（
this.props.input.onChange（value）}
onBlur={（）=>this.props.input.onBlur（this.props.input.value）}
options={this.props.options}
占位符={this.props.placeholder}
/>
{触摸？错误：“”
);

将redux表单字段组件中的CustomSelect组件用作

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

---

我不得不毫无争议地打电话给onBlur。Hardik回答的问题是，它在iPad中不起作用（可能也在其他iOS或触摸设备中。我无法检查）

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

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

constrenderselectinput=（{input，options，name，id}）=>(
input.onChange（值）}
onBlur={（值）=>input.onBlur（）}
/>
)

用作,

<Field component={RenderSelectInput} />

您好，上述解决方案没有解决我的问题，我看到了相同的行为。我可以从下拉列表中选择值，但当我单击外部时，该值消失。您在

RenderSelectInput

组件中提到了

onChange

，但在

中没有提到，这是导致问题的原因吗？或者，

RenderSelectInput

或

字段

组件中都没有提到“value”。您使用的是哪个版本的

react select

？您是否指定了

onBlur

功能，正如我在回答中所说的那样？我正在使用的是现在在GitHub.com上提供的

新版本1.0.0-rc

。可能有点晚了，但是我现在面临同样的问题，并且在没有参数的情况下调用

input.onBlur

：

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

。显然，

onBlur

me

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