0

我有一个类组件，它有一个onClick引用内部 ref 的事件处理程序input。但是，在事件处理程序input中为空。我将事件处理程序绑定到this构造函数中。

import React, { Component} from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick(e) {
    // The following throws "Cannot read property 'click' of undefined"
    this.input.click();
  }

  render() {
    return (
      <div className="container" onClick={this.onClick}>
        <input type="text" ref={input => this.input = input} />
      </div>
    );
  }
}

为什么this.input在我的事件处理程序中未定义？

编辑 显然代码运行良好，只是不在我的环境中。我将webpack和babel与 env 一起使用，并对带有热重新加载的预设做出反应。我的目标是电子。

完整的错误堆栈：

my-component.jsx:12 Uncaught TypeError: Cannot read property 'click' of undefined
    at MyComponent.onClick (http://localhost:8080/renderer.js:19224:15)
    at Object.ReactErrorUtils.invokeGuardedCallback (webpack:///./node_modules/react-dom/lib/ReactErrorUtils.js?:69:16)
    at executeDispatch (webpack:///./node_modules/react-dom/lib/EventPluginUtils.js?:85:21)
    at Object.executeDispatchesInOrder (webpack:///./node_modules/react-dom/lib/EventPluginUtils.js?:108:5)
    at executeDispatchesAndRelease (webpack:///./node_modules/react-dom/lib/EventPluginHub.js?:43:22)
    at executeDispatchesAndReleaseTopLevel (webpack:///./node_modules/react-dom/lib/EventPluginHub.js?:54:10)
    at Array.forEach (native)
    at forEachAccumulated (webpack:///./node_modules/react-dom/lib/forEachAccumulated.js?:24:9)
    at Object.processEventQueue (webpack:///./node_modules/react-dom/lib/EventPluginHub.js?:254:7)
    at runEventQueueInBatch (webpack:///./node_modules/react-dom/lib/ReactEventEmitterMixin.js?:17:18)

编辑

想通了，请参阅下面的答案。

4

3 回答 3

1

想通了，这是一个问题react-hot-loader。显然，保存 的值this在构造函数中不起作用react-hot-loader. 修复方法是在你的 babelrc 中手动启用transform-es2015-classes插件。

见https://github.com/gaearon/react-hot-loader/issues/597

于 2017-08-21T19:27:04.773 回答
0

我认为您正在尝试获取输入值。如果是，这里是代码。没有this.input.click();方法定义 

import React from 'react';

class MyComponent extends React.Component {
   constructor(props) {
    super(props);
    this.onClick = this.onClick.bind(this);
  }

  onClick(e) {
    // The following throws "Cannot read property 'click' of undefined"
    console.log(this.input.value);
  }

  render() {
    return (
      <div className="container">
        <input type="text" ref={input => this.input = input} onChange={this.onClick}/>
      </div>
    );
  }
}

export default MyComponent;
于 2017-08-21T17:48:55.467 回答
0

您是否尝试过将onClick回调重写为箭头函数？这也将使您的代码更小：

import React, { Component } from 'react';

class MyComponent extends Component {
  this.input = null;

  onClick = () => {
    this.input && this.input.click();
  }

  render() {
    return (
      <div className="container" onClick={this.onClick}>
        <input type="text" ref={input => this.input = input} />
      </div>
    );
  }
}

即使这无关紧要，我也会检查 this.input 是否已设置 - 但您可以忽略该部分（通常）。

于 2017-08-21T17:59:30.980 回答