Reactjs - 值未定义

Question

首先，我怀疑 const vector 对象可能放错了地方，但我不知道该放在哪里。 我正在尝试用箭头键控制 SVG 对象的位置。它似乎无法访问 x。

class Circle extends React.Component {
  render() {
    const { h, w, x, y, r, stroke, fill } = this.props;
    return (
      <svg height={h} width={w}>
        <circle cx={x} cy={y} r={r}
          stroke={stroke} strokeWidth="3" fill={fill} 
        />
      </svg> 
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      h: 100,
      w: 500,
      x: 50,
      y: 50,
      r: 40,
      stroke: "black",
      fill: "red"
    }
  }
  _currentPosition() {
    // Display the current position
    console.log(this.state.x, this.state.y);
  }

  _handleKey(e){
    // Define key codes and movement vectors
    const vector = {
        37: [-10, 0],
        38: [0, -10],
        39: [10, 0],
        40: [0, 10]
    };
    // Display the current position
    this.currentPosition;

    // Detect key presses and change the position accordingly
      if (e.keyCode in vector) {
      this.setState({
        x: this.state.x + vector[e.keyCode][0],
        y: this.state.y + vector[e.keyCode][1]
      })
        } 
  }

   componentDidMount() {
     document.addEventListener("keydown", this._handleKey, false);
  }
   render() {
    return (
      <div>
      <Circle { ...this.state } onKeyPress={this.handleKeyPress}/>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('app'))

我得到了错误：

VM211 pen.js:76Uncaught TypeError: Cannot read property 'x' of undefined
_handleKey @ VM211 pen.js:76

代码如下： http://codepen.io/wasteland/pen/GZvWeo?editors=0110

谢谢

Answer 1

您的问题是 this.state 在 _handleKey 中未定义。解决方案是将函数绑定到构造函数中的this，如下所示：

constructor(props) {
  super(props)
  this._handleKey = this._handleKey.bind(this)
  ...
  ...

这通常是您允许类方法访问类实例'this 的方式。

关于“无自动绑定”的 React 文档：https://facebook.github.io/react/docs/reusable-components.html#no-autobinding