15

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

<Select>当我使用react-select 中的默认值时，下面提到的代码可以正常工作。我可以从下拉列表中选择值，并且即使在关注焦点时也会选择该值，该值将保持不变。但是选定的值没有通过表单提交，因为redux-form这就是我包装<Select />组件并使用 with<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>框中，但在聚焦时它会消失。请帮我 ...

渲染选择输入组件：

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;
4

5 回答 5

11

与 redux-form 一起使用react-select时，您需要分别更改 and 方法和 call 的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} />

从字段中移除焦点时调用redux-form的方法将防止丢失值。onBlurSelect

于 2017-03-07T16:09:07.650 回答
3

这对我有用，

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/

于 2018-06-11T14:18:48.600 回答
2

使用它可以完美地工作，它还可以处理 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"
   />
于 2018-09-07T06:30:16.653 回答
2

我不得不在没有任何参数的情况下调用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} />
于 2019-10-21T10:21:27.560 回答
1

尝试将onBlurResetInput属性设置为 false。

就像是。

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

希望这可以帮助！

于 2017-10-19T05:05:09.743 回答