SelectFieldの単一オプションを選択してください。redux-form-material-ui

Question

私のレデックスアプリケーションにはいくつかのフォームがあります。私はredux-form-material-uiも使用します。 SelectFieldsには、そのオプションにデフォルトで設定されるオプションが1つだけあります。フォームコンポーネントを構築中にinitialValuesを設定してこれを行う唯一の方法はありますか？

Answer 1

ソリューションは、本当に簡単です。あなただけの適切redux-form流れに従うと、redux-formからFieldによって定義されたonChangeを呼び出す必要があります。誰もがあなたの問題を理解し、あなたを支援できるようにするために

import React from 'react'; 

import { SelectField as MUISelectField } from "redux-form-material-ui"; 

export class SelectField extends React.Component { 
    constructor(props) { 
    super(props); 

    this.chooseSingleOption(); 
    } 

    componentDidUpdate(prevProps, prevState) { 
    if (prevProps.children !== this.props.children) { 
     this.chooseSingleOption(); 
    } 
    } 

    chooseSingleOption() { 
    const children = React.Children.toArray(this.props.children); 
    if (children.length === 1) { 
     this.props.input.onChange(children[0].props.value); 
    } 
    } 

    render() { 
    return (
     <MUISelectField {...this.props}/> 
    ) 
    } 
} 

Answer 2

驚いたことに答えは「いいえ」と思われます。少なくとも、小道具を渡すのと同じくらい簡単ではないようです。

素材-ui（元は、Redux形式ではありません）doesn't support the defaultValue option for SelectFieldです。私もsimilar thread for Redux-formが見つかりました。

アレイ内に常にSelectFieldオプションのデータがある場合は、まだ解決できます。次に、配列をMenuItemの配列に変換する関数を持つことができます。

// example option data 
const optionDataArray = [{ value: "first option", key: 0 }, { value: "second option", key: 1 }]; 
const toMenuItem = menuData => 
    (<MenuItem value={value} key={key} primaryText={ value } />) 
); 

次にあなたが

<SelectField value={ 
    optionDataArray.length === 1 ? 
     optionDataArray[0].value : 
     null 
} > 
    { optionDataArray.map(toMenuItem) } 
</SelectField> 

のようにそれらをレンダリングすることができ、私はこれを試していないが、うまくいけば、これは事前に選択された入力とコンポーネントを制御1項目SelectFieldsになります。私は何も提供していないかのようにnull値が解釈されることを望んでいます。

しかし、第2の仮定/希望が真でない場合、あなたはおそらく、このような機能を作ることができます：

const getSelectFieldValueProp = allOptionData => { 
    if(allOptionData.length == 1) { 
    return { value: allOptionData[0].value } 
    } else { 
    return {}; 
    } 
} 

そして、そのように一つだけ

<SelectField {...getSelectFieldValueProp(optionDataArray) } > 
    { optionDataArray.map(toMenuItem) } 
</SelectField> 

のようにそれを使用します-item SelectFieldsは値propを取得する必要があります。