Question

我正在使用 redux-form （很棒的库）来处理我的表单＆amp; redux 存储在 React 应用中。一切运作良好，重要的形式和嵌套的json输出。

我正在尝试将 React-Semantic-UI 组件与 redux-form 一起使用。我在文档中搜索了如何将自定义组件与redux表单集成，我们在这里： http://redux-form.com/6.5.0/docs/faq/CustomComponent.md/ 似乎很完美。

但是当我整合Semantic和它时，它会起作用。

这是我用伪代码进行的简单测试：

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

这里我的CustomComponent使用Dropdown。您可以找到下拉文档＆amp;道具（onChange＆amp; 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 ui有简单的例子吗？

感谢您的帮助。

Answer 1

好的，我成功了：

要使用React Semantic Dropdown，这是一个简单的例子：

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

一切都很好。您可以使用Semantic和任何组件执行相同操作。

希望有人发现这个有用。

Answer 2

我发现接受的答案在我的情况下不起作用，redux表单一直触发FOCUS动作，一直触发重新渲染，我的下拉字段无法打开。可能是我的坏，或更新，但没有时间调试，所以提出了这个解决方案。

我正在使用Typescript，并将Semantic UI Dropdown字段包装在自定义组件中，该组件直接从redux表单添加和检索下拉值。

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

<强> ReduxFormSemanticDropdownComponent

如果使用Typescript将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',
        }
    ]}
/>

集成React-Semantic-UI和redux-form

2 个答案: