Redux 表单默认值

Posted 2023-02-22

【中文标题】Redux 表单默认值

【英文标题】：Redux form defaultValue

【发布时间】：2017-09-23 16:38:46

【问题描述】：

如何将defaultValue设置为输入组件？

<Field name=`$prize.rank` defaultValue=index component=Input type='text'/>

我像上面那样尝试过，但我的字段是空的。我正在尝试创建fieldArray（动态表单）：

fields.map((prize, index) =>
    <div key=index className="fieldArray-container relative border-bottom" style=paddingTop: 35>
        <small className="fieldArray-title marginBottom20">Prize index + 1
            <button
                type="button"
                title="Remove prize"
                className="btn btn-link absolute-link right"
                onClick=() => fields.remove(index)>Delete</button>
        </small>
        <div className="row">
            <div className="col-xs-12 col-sm-6">
                <Field name=`$prize.rank`  defaultValue=index component=Input type='text'/>
                <Field name=`$prize.prizeId` defaultValue=index component=Input type='text'/>
                <Field
                    name=`$prize.name`
                    type="text"
                    component=Input
                    label='Prize Name'/>
            </div>
            <div className="col-xs-12 col-sm-6">
                <Field
                    name=`$prize.url`
                    type="text"
                    component=Input
                    label="Prize URL"/>
            </div>
            <div className="col-xs-12">
                <Field
                    name=`$prize.description`
                    type="text"
                    component=Input
                    label="Prize Description" />
            </div>
        </div>
    </div>
)

【参考方案1】：

这个jsfiddle有一个例子

https://jsfiddle.net/bmv437/75rh036o/

const renderMembers = ( fields ) => (
  <div>
    <h2>
      Members
    </h2>
    <button onClick=() => fields.push()>
      add
    </button>
    <br />
    fields.map((field, idx) => (
      <div className="member" key=idx>
        First Name
        <Field name=`$field.firstName` component="input" type="text" />
        <br />
        Last Name
        <Field name=`$field.lastName` component="input" type="text" />
        <br />
        <button onClick=() => fields.remove(idx)>
          remove
        </button>
        <br />
      </div>
    ))
  </div>
);

const Form = () => (
  <FieldArray name="members" component=renderMembers />
);

const MyForm = reduxForm(
  form: "foo",
  initialValues: 
    members: [
      firstName: "myFirstName"
    ]
  
)(Form);

【参考方案2】：

这是我使用 HoC 的实现

import  Component  from 'react'
import 
  change,
 from 'redux-form'

class ReduxFormInputContainer extends Component
  componentDidMount()
    const 
      initialValue,
      meta,
     = this.props
    if(initialValue === undefined || meta.initial !== undefined || meta.dirty) return
    const 
      meta:  form, dispatch ,
      input:  name ,
     = this.props
    dispatch(change(form, name, initialValue))
  
  render()
    const 
      initialValue,
      component: Compo,
      ...fieldProps
     = this.props
    return <Compo ...fieldProps />
  


function reduxFormInputContainer(component)
  return function(props)
    return <ReduxFormInputContainer ...props component=component />
  


export default reduxFormInputContainer

然后例如：

import reduxFormInputContainer from 'app/lib/reduxFormInputContainer'

InputNumericWidget = reduxFormInputContainer(InputNumericWidget)

class InputNumeric extends Component
  render()
    const props = this.props
    return (
      <Field component=InputNumericWidget ...props />
    )
  

【参考方案3】：

在 redux 表单上，您可以调用 initialize() 并使用如下值的对象：

class MyForm extends Component 
  componentWillMount () 
    this.props.initialize( name: 'your name' );
  

  //if your data can be updated
  componentWillReceiveProps (nextProps) 
    if (/* nextProps changed in a way to reset default values */) 
      this.props.destroy();
      this.props.initialize(…);
    
  

  render () 
    return (
      <form>
       <Field name="name" component="…" />
      </form>
    );
  


export default reduxForm()(MyForm);

这样你可以一遍又一遍地更新默认值，但如果你只需要在第一次这样做，你可以：

export default reduxForm(values: …)(MyForm);

【讨论】：

我的意思是，你没有错。但这并不能解释为什么 defaultValue 不起作用：如果该字段的当前值在 Redux Store 中未定义，则要使用的值。