can not call refs because...

refs.md

in some case, you cant call refs and get error:

undefined is not a function(evaluating'_this.refs.ModalPicker.onOpen()')

to solve this issue.

comment this lines

// const mapStateToProps = (state) => {
//   return {
//   }
// }

// const mapDispatchToProps = (dispatch) => {
//   return {
//   }
// }

// export default connect(mapStateToProps, mapDispatchToProps)(ModalPicker)

and

export default class

note: CAN NOT call refs in willMount, but you CAN call it in didMount

không thể gọi ref khi child component có redux:

Nôm na HOC là hàm để thay đổi component này thành component khác. (React Higher Order Components)

Hàm connect của react-redux cũng là HOC

Kỹ thuật này sẽ return component mới và pass props của component cũ vào. Mà ref gần như không phải prop nên bị mất.

React 16 thì có forwardRef tiện hơn

example:

class Foo extends React.Component {
  componentDidMount() {
     this.props.onRef(this);
  }

  render() {
     return 
  }
}
export default Foo;

import Foo from './foo';

class App extends React.Component {
onClick = () => {
    this.child.method() // do stuff
  }
   render() {
     <Foo onRef={foo => this.child=foo} />
     <button onClick={this.onClick}>Child.method()</button>
  } 
}

kriasoft/react-starter-kit#909 (comment) facebook/react#9348 (comment)