无法在 redux-form-material-ui TextField 中设置 defaultValue

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

我遇到了同样的问题。再次阅读文档并看到了这个

没有默认值

由于 redux-form 严格的“受控组件”性质，一些与默认值相关的 Material 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 redux form with 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 redux form with 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>