javascript - React Select 与 Redux React 表单

Question

我正在尝试将 react-select 与 react redux 表单集成 (https://github.com/davidkpiano/react-redux-form)

这是我当前的组件设置，我正在将 Prop 从另一个组件传递给它。

...
 <MultiSelect model="event.category" options={this.props.categoryList} />
...

多选组件

import React, {Component} from 'react';
import {Control} from 'react-redux-form';
import Select from 'react-select';
import 'react-select/dist/react-select.css';

class MultiSelect extends Component {
    constructor(props) {
        super(props);
        this.state = {categoryValue: []};
    }

    handleSelectChange = value => {
        this.setState({categoryValue: value});
    };

    render() {
        let reactSelect = props => (
            <Select
                {...props}
            />
        );

        return (
            <div className="form__row">
                <div className="form__label">
                    <span className="form__title">
                        {this.props.title}
                        {this.props.isRequired ? (
                            <span className="form__required">*</span>
                        ) : (
                            ''
                        )}
                    </span>
                </div>
                <Control.custom
                    model={this.props.model}
                    id={this.props.model}
                    component={reactSelect}
                    simpleValue
                    multi
                    value={this.state.categoryValue}
                    options={this.props.options}
                    onChange={this.handleSelectChange}
                    joinValues
                    name={this.props.model}
                    required
                />
            </div>
        );
    }
}

export default MultiSelect;

我的问题是我似乎无法在我的 React redux 表单状态中获取隐藏文本字段的值。我可能缺少什么？

这里也是代码沙箱https://codesandbox.io/s/ww4wqyp02l

Answer 1

From the documentation ;

If you do not want any standard property mappings (such as onChange, onBlur, etc.) passed down to your custom control component, use and define your own mappings:

<Control.custom
  component={SpecialCustomText}
  mapProps={{
    onTextChange: (props) => props.onChange,
    onLoseFocus: (props) => props.onBlur,
    // etc.
  }} 
/>

此外，您还需要一个提交按钮，您可以在该按钮上从您创建的 MultiSelect 组件中检索值。

我已进行更改以在您的 codesandbox here 上反射(reflect)这些更改