redux-form-material-uiのdefaultValueを設定できませんTextField

Question

textFieldコンポーネントのデフォルト値を設定できません。 デフォルト値を使ってみましたが、redux-form-material-uiを使用している限り、動作しません。

import React from 'react' 
import { Field, FieldArray, reduxForm } from 'redux-form' 
import validate from './validate' 
import {TextField} from 'redux-form-material-ui' 

const renderField = (props) => { 
    console.log(props); 
    const { input, label, type, meta: { touched, error } } = props; 
    console.log(input); 
    return <div> 
    <label>{label}</label> 
    <div> 
// Will not show "someValue", it will just be blank 
     <TextField defaultValue="someValue" {...input} type={type} placeholder={label}/> 
     {touched && error && <span>{error}</span>} 
    </div> 
    </div> 
} 

const renderMembers = ({ fields, meta: { touched, error, submitFailed } }) => (
    <ul> 
    <li> 
     <button type="button" onClick={() => fields.push({})}>Add Member</button> 
     {(touched || submitFailed) && error && <span>{error}</span>} 
    </li> 
    {fields.map((member, index) => 
     <li key={index}> 
     <button 
      type="button" 
      title="Remove Member" 
      onClick={() => fields.remove(index)}/> 
     <h4>Member #{index + 1}</h4> 
     <Field 
      name={`${member}.firstName`} 
      type="text" 
      component={renderField} 
      label="First Name"/> 
     <Field 
      name={`${member}.lastName`} 
      type="text" 
      component={renderField} 
      label="Last Name"/> 
     <FieldArray name={`${member}.hobbies`} component={renderHobbies}/> 
     </li> 
    )} 
    </ul> 
) 

const renderHobbies = ({ fields, meta: { error } }) => (
    <ul> 
    <li> 
     <button type="button" onClick={() => fields.push()}>Add Hobby</button> 
    </li> 
    {fields.map((hobby, index) => 
     <li key={index}> 
     <button 
      type="button" 
      title="Remove Hobby" 
      onClick={() => fields.remove(index)}/> 
     <Field 
      name={hobby} 
      type="text" 
      component={renderField} 
      label={`Hobby #${index + 1}`}/> 
     </li> 
    )} 
    {error && <li className="error">{error}</li>} 
    </ul> 
) 

const FieldArraysForm = (props) => { 
    const { handleSubmit, pristine, reset, submitting } = props 
    return (
    <form onSubmit={handleSubmit}> 
     <Field name="clubName" type="text" component={renderField} label="Club Name"/> 
     <FieldArray name="members" component={renderMembers}/> 
     <div> 
     <button type="submit" disabled={submitting}>Submit</button> 
     <button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button> 
     </div> 
    </form> 
) 
} 

export default reduxForm({ 
    form: 'fieldArrays',  // a unique identifier for this form 
    validate 
})(FieldArraysForm) 

ありがとう：私は本当に私が間違っているのかを理解していない

は

exmaple（ちょっと自分fieldArray例を変更）...（かなり基本的なようです）。

Answer 1

私は同じ問題を抱えていました。ただ、この

デフォルト値はありません

ためReduxのフォームの厳格な「制御要素」は、自然界の

を再びドキュメントを読んでいないと見て、値の不履行に関連した素材UIの機能の一部が無効になっ例えばされていますdefaultValue、defaultDate、defaultTime、defaultToggled、defaultCheckedなどです。フィールドを特定の状態に初期化する必要がある場合は、redux-formのinitialValues APIを使用する必要があります。

Answer 2

これはおそらく、編集のフォームを作成する唯一の方法です。 初期還元型の値からは復元できません。

入力

export default function ({ input, label, meta: { touched, error }, ...custom }) { 
    if (input.value === '' && custom.cvalue) { // hack for fucking redux form with fucking material components 
     input.onChange(String(custom.cvalue)); 
    } 
    return (
     <TextField 
      {...input} 
      {...custom} 
      fullWidth={true} 
      hintText={label} 
      floatingLabelText={label} 
      errorText={touched && error} 
     /> 
    ) 
} 

選択

export default function ({ input, label, meta: { touched, error }, onChange, children, ...custom }) { 
    if (input.value === '' && custom.cvalue) { // hack for fucking redux form with fucking material components 
     if (is.function(onChange)) { 
      onChange(custom.cvalue); 
     } 
     input.onChange(custom.cvalue); 
    } 
    return (
     <SelectField 
      {...input} 
      {...custom} 
      fullWidth={true} 
      children={children} 
      floatingLabelText={label} 
      errorText={touched && error} 
      onChange={(event, index, value) => { 
       if (is.function(onChange)) { // and custom onChange for f....g .... 
        value = onChange(value); 
       } 
       input.onChange(value); 
      }}/> 
    ) 
} 

、テンプレート にその既存のエンティティを編集するフォームを作成する方法することができます....

<Field 
    name="study" 
    label="Studies" 
    component={ FormSelect } 
    cvalue={this.state.study.id} 
    onChange={value => { 
     this.setState({study: _.find(studies, {id: value})||{id: 0}}); 
     return value; 
    }}> 
    {studies.map((study, key) => (<MenuItem key={key} value={study.id} primaryText={study.officialTitle} />))}   
</Field>