Redux form defaultValue

Festlegen defaultValue zu input-Komponente? 

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

Habe ich versucht wie oben, aber meine Felder sind leer. Ich bin versucht zu erstellen fieldArray (dynamische Formulare):

{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>
)}
InformationsquelleAutor | 2017-04-26
  1. 27

    Auf redux Formulare, die Sie anrufen können initialize() mit einem Objekt der Werte etwa so:

    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);

    Diese Weise können Sie aktualisieren Sie die default-Werte immer und immer wieder, aber wenn Sie nur brauchen, um es in der ersten Zeit können Sie:

    export default reduxForm({values: {…}})(MyForm);
    • Ich meine, Sie sind nicht falsch. Das bedeutet aber nicht erklären, warum defaultValue nicht funktioniert: Ein Wert verwendet werden, wenn der aktuelle Wert für dieses Feld ist nicht definiert in der Redux-Shop.
    InformationsquelleAutor philipp
  2. 8

    Diesem jsfiddle ist ein Beispiel

    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)
    InformationsquelleAutor radix
  3. 1

    dies ist meine Umsetzung mit einem 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

    dann zum Beispiel:

    import reduxFormInputContainer from 'app/lib/reduxFormInputContainer'

InputNumericWidget = reduxFormInputContainer(InputNumericWidget)

class InputNumeric extends Component{
  render(){
    const props = this.props
    return (
      <Field component={InputNumericWidget} {...props} />
    )
  }
}
    InformationsquelleAutor Jo Takion
Schreibe einen Kommentar