無法在redux-form-material-ui中設置defaultValue TextField

Question

我無法爲textField組件設置默認值。 我嘗試使用默認值，但只要我使用的是redux-form-material-ui，它就不起作用。

我真不明白我在做什麼錯了（似乎很基本的）...

〔實施例（只是改變了它們的fieldArray例如一點點）：

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) 

感謝。

Answer 1

我遇到了同樣的問題。剛剛通過的文件再次閱讀，看到這個

沒有默認值

因爲終極版形式的嚴格「控制部件」的性質，相關的一些價值觀的拖欠材料UI功能已被禁用例如defaultValue，defaultDate，defaultTime，defaultToggled，defaultChecked等。如果需要將字段初始化爲特定狀態，則應使用redux-form的initialValues API。

Answer 2

這可能只是一種編輯形式。 它不能從最初的Redux Form值恢復。

輸入

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>