erikras

/**

The following can replace the file in the Field Arrays example
(https://github.com/erikras/redux-form/tree/master/examples/fieldArrays) to demonstrate this functionality.

**/
import React from 'react'
import { connect } from 'react-redux'
import { Field, FieldArray, reduxForm, formValueSelector } from 'redux-form'
import validate from './validate'

erikras

import MyCustomButton from './ui/MyCustomButton'

class MyClicker extends Component {
  constructor() {
    super()
    this.state = { clicked: false }
  }
  
  render() {
    return <div>

erikras

import MyCustomButton from './ui/MyCustomButton'

class MyClicker extends Component {
  constructor() {
    super()
    this.state = { clicked: false }
  }

  handleClick() {
    this.setState({ clicked: true })

erikras

import MyCustomButton from './ui/MyCustomButton'

class MyClicker extends Component {
  constructor() {
    super()
    this.state = { clicked: false }
    this.handleClick = this.handleClick.bind(this) // Problem solved!
  }

  handleClick() {

erikras

import MyCustomButton from './ui/MyCustomButton'

class MyClicker extends Component {
  constructor() {
    super()
    this.state = { clicked: false }
  }

  handleClick = () => {
    // "this" is the right instance of this component

erikras

/** Clears a form value */
const clear = ([name], state, { changeValue }) => {
  changeValue(state, name, () => undefined)
}

/** Converts a form value to uppercase **/
const upper = ([name], state, { changeValue }) => {
  changeValue(state, name, value => value && value.toUpperCase())
}

erikras

import { createForm } from 'final-form'
import arrayMutators from 'final-form-arrays'

// Create Form
const form = createForm({
  mutators: {
    // potentially other mutators here
    ...arrayMutators
  },
  onSubmit

erikras

import { createForm } from 'final-form'
import createDecorator from 'final-form-calculate'

// Create Form
const form = createForm({ onSubmit })

// Create Decorator
const decorator = createDecorator(
  // Calculations:
  {

erikras

import { createForm } from 'final-form'
import setFieldData from 'final-form-set-field-data'

// Create Form
const form = createForm({
  mutators: { setFieldData },
  onSubmit
})

form.mutators.setFieldData('firstName', { awesome: true })

erikras

const WarningEngine = ({ mutators: { setFieldData } }) => (
  // FormSpy lets you listen to any part of the form state you want.
  // If you provide an onChange prop, FormSpy will not render to the DOM.
  <FormSpy
    subscription={{ values: true }}
    onChange={({ values }) => {
      setFieldData('firstName', {
        warning: values.firstName ? undefined : 'Recommended'
      })
      setFieldData('lastName', {