score:1

Accepted answer
import { Field, reduxForm, formValueSelector } from 'redux-form'
import { compose } from 'redux'
import { connect } from 'react-redux'

class MapInput extends React.Component {
  constructor(props) {
    super(props)
  }

  handleChange = () => {
    // latitude and longitude are now in props
    console.log(this.props.latitude)
    console.log(this.props.longitude)
  }

  render() {
    const { value } = this.state
    const { latitude, longitude } = this.props
    return (
      <div style={{ marginTop: 15 }}>
        <TitleText text="Address" />
        <MapView
          draggable={true}
          zoom={DefaultZoom}
          position={{
            lat: latitude,
            lng: longitude
          }}
          onChange={this.handleChange}
        />

        <Field
          component={renderTextField}
          name="latitude"
          type="number"
          value={value.lat}
          {...rest}
        />
        <span>
          &nbsp;<code>x</code>&nbsp;
        </span>
        <Field
          component={renderTextField}
          name="longitude"
          type="number"
          value={value.lng}
          {...rest}
        />
      </div>
    )
  }
}

const selector = formValueSelector('formName')

export default compose(
  connect(state => {
    const { latitude, longitude } = selector(state, 'latitude', 'longitude')
    return {
      latitude,
      longitude
    }
  }),
  reduxForm({ form: 'formName' })
)(MapInput)

Related Query

More Query from same tag