集成和redux-form

Question

我正在使用redux表单(可怕的libs)来处理我的表单& React应用程序中的redux商店。所有东西都工作得很好，重要的表单和嵌套的json输出。

我正在尝试将React-Semantic-UI组件与redux表单结合使用。我在文档中搜索了一下，如何将定制组件与redux表单集成起来，然后我们开始：http://redux-form.com/6.5.0/docs/faq/CustomComponent.md/看起来很完美。

但是当我把语义和这个集成在一起的时候，它就起作用了。

这是我对伪代码的简单测试：

const TestComponent = props => (
<Form>
     <Field name="dropdownTest" component={ TestSelect } />
</Form>
)

这里我的CustomComponent使用下拉列表。您可以在这里找到下拉文档和道具(onChange & value )：

http://react.semantic-ui.com/modules/dropdown

import Form , Dropdown from 'semantic-ui-react'
import {myOption from './myOption'

const TestSelect = field = (
   <Form.Field>
            <label> Test dropdown </label>
             <Dropdown option={myOption} selection 
                                   value={{val : field.input.value}}
                                   onChange={ param => field.input.onChange(param.val)} />
     </Form.Field>
)

与文档一样，我在自定义组件上增加了价值& onChange支持。

我显然怀念这里的一些东西。是否有人有一个简单的示例，使用redux-form和semantc用户界面？

谢谢你的帮助。

Answer 1

好吧，我成功了：

要使用React语义下拉列表，这是一个简单的示例：

const TestComponent = props => (
<Form>
     <Field name="dropdownName" component={ DropdownFormField}
            label="Dropdown Test" 
      />

</Form>
)



const DropdownFormField = props => (
 <Form.Field>
   <Dropdown selection {...props.input}
             value={props.input.value}
             onChange={(param,data) => props.input.onChange(data.value)}
             placeholder={props.label} 
    />
  </Form.Field>
)

一切都很顺利。您也可以对语义和任何组件进行同样的操作。

希望有人能找到有用的东西。

Answer 2

我发现接受的答案在我的情况下不起作用，redux表单一直在触发一个FOCUS操作，它会触发重呈现，而我的下拉字段将不会打开。可能是我的错误，或者是更新，但是没有时间进行调试，所以想出了这个解决方案。

我使用类型记录，并将语义UI下拉字段封装在一个自定义组件中，该组件直接从redux表单中添加和检索下拉值。

工作到目前为止，应该很容易移植到香草JS。

ReduxFormSemanticDropdownComponent

如果使用类型记录，请将AppState更改为您自己的状态对象类型。

import { DropdownProps, Dropdown, Form, DropdownItemProps } from "semantic-ui-react";
import * as React from "react";
import { Dispatch } from "redux";
import { AppState } from "../../..";
import { change, formValueSelector } from "redux-form";
import { connect } from "react-redux";

interface OwnProps {
    name: string;
    form: string;
    label: string;
    placeholder?: string;
    options: Array<DropdownItemProps>;
}

interface DispatchProps {
    change: (form: string, field: string, value: string) => void;
}

interface StateProps {
    selectedValue: any;
}

type Props = OwnProps & DispatchProps & StateProps;

class ReduxFormSemanticDropdownComponent extends React.Component<Props> {

    onChange = (value: string) => {
        this.props.change(this.props.form, this.props.name, value);
    }

    render() {
        return (
            <Form.Field>
                <label>{this.props.label}</label>
                <Dropdown
                    placeholder={this.props.placeholder}
                    fluid
                    selection
                    value={this.props.selectedValue}
                    onChange={(event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => this.onChange(data.value as string)}
                    options={this.props.options}
                />
            </Form.Field>
        )
    }
}

const mapDispatchToProps = (dispatch: Dispatch<AppState>): DispatchProps => {
    return {
        change: (form: string, field: string, value: string) => dispatch(change(form, field, value)),
    };
};

const mapStateToProps = (state: AppState, ownProps: OwnProps): StateProps => {
    var selector = formValueSelector(ownProps.form);

    return {
        selectedValue: selector(state, ownProps.name)
    }
}

export const ReduxFormSemanticDropdown = connect<StateProps, DispatchProps, OwnProps>(mapStateToProps, mapDispatchToProps)(ReduxFormSemanticDropdownComponent);

使用

将其添加到正常的redux表单中，它的行为应该像标准字段那样。

<ReduxFormSemanticDropdown
    name="gigType"
    form="applicationForm"
    label="Gig Type"
    options={[
        {
            text: `I'm flexible!`,
            value: 'Flexible',
        },
        {
            text: 'Mid Week (Evening)',
            value: 'MidWeekEvening',
        },
        {
            text: 'Weekend (Afternoon)',
            value: 'WeekendAfternoon',
        },
        {
            text: 'Weekend (Evening)',
            value: 'WeekendEvening',
        }
    ]}
/>