this.refs =与babel env设置“最后2个chrome版本”反应时未定义

Question

I have a rather basic this.refs.form reference:

someFunc(){
        console.info(this.refs.signInForm); //<form>
}

redner(){
    return (
        ...
        <form role="form" ref="signInForm" onSubmit={this.signInUser}>
        ...
    )
};

That works when my .babelrc file looks like this:

{
  "plugins": [
    "transform-react-stateless-component-name",
    "transform-react-require", [
      "module-resolver", {
        "root": ["./src"],
        "alias": {
          "components": "./src/components",
          "configuration": "./configuration",
          "state": "./src/state",
          "test": "./src/test",
          "utils": "./src/utils"
        }
      }
    ],
    "transform-class-properties",
    "dynamic-import-node",
    "react-hot-loader/babel"
  ],
  "presets": [
    "env",
    "stage-0",
    "react"
  ]
}

However when I change the presents to:

  "presets":
  [
    ["env", {
      "targets": {
        "browsers": ["last 2 Chrome versions"]
      }
    }],
    "stage-0",
    "react"
  ]

this.refs becomes undefined.

I would like to be able to use env.targets.browsers and be able to use the refs in react.

Answer 1

You need to pass a callback function. See example from the docs https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element