ReactJS:如何在 redux-form 字段中包装 react-select? [英] ReactJS: How to wrap react-select in redux-form field?

问题描述

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

当我使用 react-select 中的默认 时，下面提到的代码工作正常.我可以从下拉列表中选择值，即使在焦点上该值将保持不变时也会选择该值.但是由于 redux-form，选定的值没有通过表单提交，这就是我包装 组件并与

从'react'导入React；导入从反应选择"中选择；从'./RenderSelectInput'导入RenderSelectInput；//我的自定义选择框var options = [{ value: 'one', label: 'one' }, { value: 'two', label: 'Two' }];class SelectEx 扩展了 React.Component {构造函数(){极好的();this.state = { selectValue: 'sample' }this.updateValue = this.updateValue.bind(this);}更新值(新值){this.setState({ selectValue: newValue })}使成为() {返回 (<div><选择名称="select1" id="selectBox" value={this.state.selectValue} options={options} onChange={this.updateValue}/>//这有效，但值不会提交...<Field name="sample" component={RenderSelectInput} id="sampleEX" options={options}/>//为此，一旦我从组件中出来，选定的值就会消失.

)}}导出默认 SelectEx；

但是当我使用我的自定义选择(我正在包装提交表单中的值)时， 组件可以在 UI 中可见，即使是值也.但是无法从下拉列表中选择值...，如果我也选择它，它会显示在 <Select> 框中，但在聚焦时它会消失.请帮帮我...

RenderSelectInput 组件:

从'react'导入React；从'redux-form'导入{Field，reduxForm}；导入从反应选择"中选择；导入 'react-select/dist/react-select.css';const RenderSelectInput = ({input, options, name, id}) =>(<div><选择{...input} name={name} options={options} id={id}/>
)导出默认渲染选择输入；

解决方案

当使用 react-select 和 redux-form 时，你需要改变 onChange 的默认行为code> 和 onBlur 方法并分别调用 redux-form 的 onChange 和 onBlur 方法.

所以，试试这个:

const RenderSelectInput = ({input, options, name, id}) =>(<选择{...输入}id={id}名称={名称}选项={选项}值={输入.值}onChange={(value) =>input.onChange(value)}onBlur={(value) =>input.onBlur(value)}/>)

并使用上面的组件

当焦点从 Select 字段移开时调用 redux-form 的 onBlur 方法将防止值丢失.

I am working on react-select library and facing some issues, I am using redux-form library and importing <Field /> component from it. So that I can submit the values via form to service.

Below mentioned code works fine, when I use default <Select> from react-select. I can able to select the values from the drop down and the value will be selected even on focus out the value will remain. But selected value is not submitting via form due to redux-form that's why I am wrapping <Select /> component and using 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;

But when I use with my customized select (I am wrapping the to submit the value from form) the <Select> component can be visible in UI even the values also. But unable to select the value from dropdown ..., If I select also it displays in the <Select> box but on focus out it vanishes. Please help me ...

RenderSelectInput component:

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;

解决方案

When using react-select with redux-form, you'll need to change the default behavior of onChange and onBlur method and call redux-form's onChange and onBlur method respectively.

So, Try this:

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

and use the above component like

<Field component={RenderSelectInput} />

Calling redux-form's onBlur method when focus is removed from the Select field will prevent loss of value.

这篇关于ReactJS:如何在 redux-form 字段中包装 react-select?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

登录 关闭

扫码关注1秒登录

发送“验证码”获取 | 15天全站免登陆