WebStorm中的React.js未解析变量

Question

I get an unresolved variable issue in the following code snippet:

constructor(props) {
    super(props);
    this.handleModalView = this.handleModalView.bind(this);
}

handleModalView() {
    this.refs.temp.handleShow();
}

render() {
  return (
    <div className="App">
      <ModalView ref = 'temp' />
      <img src="some_image_source"
        className="SettingsLogo" onClick={this.handleModalView}
      />
  </div>

The IDE shows an unresolved variable temp in handleModalView() . However, my code works just fine.

Edit 1 : I have included the constructor that I have written. The error is still there.

Answer 1

You should create a constructor in your component class and bind all of the member functions:

class App extends Component {
    constructor(props) {
      super(props);
      this.handleModalView = this.handleModalView.bind(this);
    }

    handleModalView() {
      this.refs.temp.handleShow();
    }

    render() {
      return (
        <div className="App">
          <ModalView ref = 'temp' />
          <img src="some_image_source"
            className="SettingsLogo" onClick={this.handleModalView}
          />
        </div>)
}