1

I’m having an issue while accessing this.refs in the handleSubmit function.

My container looks like this:

import React, { Component } from 'react'
import { Link } from 'react-router'
import { connect } from 'react-redux'

import { getSomeStuff } from '../actions/someApiActions’


class MyClass extends Component {
  componentWillMount() {
    this.props.dispatch(getSomeStuffFromApi(this.props.params.cuid))
  }

  handleSubmit = () => {
    console.log(this.refs) // always console logs an empty object {}
  }

  render() {
    if(!this.props.results.item){
      return (
        <div>... loading …</div>
      )
    }
    const { name } = this.props.results.item.stuff
    return (
      <div>
        <p><input ref="name" defaultValue={ name }/></p>
        <button type="submit" onClick={this.handleSubmit}>Update</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    results: state.getSomeStuff
  }
}

export default connect(mapStateToProps)(MyClass)

When I click on a submit button, handleSubmit will always logs an empty object (even though input is correctly rendered in html). I have noticed I can access this.refs in the componentDidUpdate method without any problem.

Why is accessing this.refs in handleSubmit not working?

mr guest
  • 21
  • 5
  • Working fine in this fiddle: https://jsfiddle.net/free_soul/49bdw76z/ – yadhu Nov 21 '16 at 07:28
  • @mrguest did you strip out some code ? if yes then please check my answer here http://stackoverflow.com/a/40708397/1785635 – abhirathore2006 Nov 21 '16 at 07:55
  • @abhirathore2006 I did not strip any code ... could be the problem in the parent of the component? (this one is rendered via react-router through {this.props.children}) – mr guest Nov 21 '16 at 17:24

1 Answers1

1

LOL! The problem was in the babel translator. In the .babelrc I've been using this presets:

{
  "presets": ["react", "node7", "stage-1"]
}

I had to change it to this:

{
  "presets": ["react", "es2015", "stage-1"]
}
mr guest
  • 21
  • 5