web-dev-qa-db-ja.com

React-Semantic-UIとredux-formを統合する

私はredux-form（素晴らしいライブラリ）を使用してフォームを処理しています＆reduxReactアプリに保存します。重要なフォームとネストされたjson出力など、すべてがうまく機能します。

React-Semantic-UIコンポーネントとredux-formを使用しようとしています-）。私はドキュメント内でカスタムコンポーネントを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>
)

ドキュメントのように、カスタムコンポーネントにvalue＆onChange小道具を追加しました。

私は明らかにここで何かが恋しいです。誰かがredux-formとsemantcuiの簡単な例を持っていますか？

助けてくれてありがとう。

javascriptreactjsreduxsemantic-uiredux-form
12
GreGGus

成功しました：

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

そして、すべてがうまく機能しています。セマンティックおよび任意のコンポーネントでも同じことができます。

誰かがこれが役に立つと思ったことを願っています。

31
GreGGus

私の場合、受け入れられた回答が機能していないことがわかりました。reduxフォームはFOCUSアクションを実行し続け、再レンダリングをトリガーし続け、ドロップダウンフィールドが開きませんでした。おそらく私の悪い、またはアップデートですが、デバッグする時間がなかったので、この解決策を思いつきました。

TypeScriptを使用しており、セマンティックUIドロップダウンフィールドをカスタムコンポーネントでラップして、reduxフォームからドロップダウン値を直接追加および取得します。

これまでのところうまく機能し、VanillaJSに簡単に移植できるはずです。

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',
        }
    ]}
/>
0
Chris