Question

我正在尝试将反应选择与反应还原形式（https://github.com/davidkpiano/react-redux-form）

进行整合

这是我当前的组件设置，我从另一个组件传递道具。

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;

多选组件

Math.floor(new Date().getTime() / 1000)

我的问题是我似乎无法在我的react redux表单状态中获取该隐藏文本字段的值。我能错过什么？

以下是代码沙箱https://codesandbox.io/s/ww4wqyp02l

Answer 1

From the documentation;

如果您不想要任何标准属性映射（例如onChange， onBlur等）传递给你的自定义控件组件，使用并定义自己的映射：

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

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

我已做出更改以反映codesandbox here

上的这些更改

React Select with Redux React表单

1 个答案: