Question

首先，我怀疑const矢量对象可能位于错误的位置，但我不知道在哪里放置它。我试图用箭头键控制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。

对＃34; No Autobinding＆＃34;：https://facebook.github.io/react/docs/reusable-components.html#no-autobinding

的反应文档

Reactjs - 值未定义

1 个答案: