在

Question

我有一个反应组件的代码。

import React, { Component } from 'react';
import CalcButton from './CalcButton';
import Operand from './Operand';
import '../custom.css';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      prevVal: '',
      currentVal: ''
    }
  }

  handleOpClick(event) {
    console.log('------------event------', event.target.value);
    console.log(this.state.currentVal);
    this.setState({
      currentVal: 'test'
    })
  }

  render() {

    const firstRow = ["7", "8", "9"];
    const secRow = ["4", "5", "6"];
    const thirdRow = ["1", "2", "3",];
    return (
      <div className="container">
        <div className="app">
          <div className="inpCont">
            <input
            type="text"
            className="inpBox"
            value={this.state.currentVal}
            />
          </div>
          <div className="btnCont">
            <div className="btnRow">
            {
              firstRow.map((row, index) => {
                return <CalcButton
                  handleClick={(event) => {
                    this.setState({
                      currentVal: this.state.currentVal + event.target.value
                    });
                  }}
                  key={index}
                  number={row} />;
              })
            }
            <Operand
              handleOpClick={this.handleOpClick}
              operator="/" />
            </div>
            <div className="btnRow">
            {
              secRow.map((row, index) => {
                return <CalcButton
                  handleClick={(event) => {
                    this.setState({
                      currentVal: this.state.currentVal + event.target.value
                    });
                  }}
                  key={index}
                  number={row}/>;
              })
            }
            <Operand
              handleOpClick={this.handleOpClick}
              operator="*" />
            </div>
            <div className="btnRow">
            {
              thirdRow.map((row, index) => {
                return <CalcButton
                  handleClick={(event) => {
                    this.setState({
                      currentVal: this.state.currentVal + event.target.value
                    });
                  }}
                  key={index}
                  number={row} />;
              })
            }
            <Operand
              handleOpClick={this.handleOpClick}
              operator="+" />
            </div>
            <div className="btnRow">
            <Operand
              handleOpClick={this.handleOpClick}
              operator="Clear" />
            <Operand
              handleOpClick={this.handleOpClick}
              operator="=" />
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default App;

当我尝试访问类的handleOpClick方法中的状态时，它会抛出以下错误。

App.jsx:18 Uncaught TypeError: Cannot read property 'state' of null
    at handleOpClick (http://localhost:3000/static/js/bundle.js:32849:24)
    at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17144:17)
    at executeDispatch (http://localhost:3000/static/js/bundle.js:16927:22)
    at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:16950:6)
    at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16338:23)
    at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16349:11)
    at Array.forEach (native)
    at forEachAccumulated (http://localhost:3000/static/js/bundle.js:17247:10)
    at Object.processEventQueue (http://localhost:3000/static/js/bundle.js:16552:8)
    at runEventQueueInBatch (http://localhost:3000/static/js/bundle.js:24174:19)

如何在组件类方法中访问状态。我想编写通用逻辑来处理操作员点击。我哪里错了？

由于

Answer 1

使用ES5时，您可以使用上述handleOpClick={this.handleOpClick}。但是在ES6中，您应该将上下文绑定到当前类，并且可以使用以下三种方法之一来完成此操作。

1. 您可以将所有handleOpClick={this.handleOpClick}更改为handleOpClick={this.handleOpClick.bind(this)}

2. 或者，将所有handleOpClick={this.handleOpClick}更改为箭头功能handleOpClick={evt => this.handleOpClick(evt)}

3. 或者，保留所有handleOpClick={this.handleOpClick}，但将原始方法handleOpClick更改为Panther所述的箭头功能。

像，

 handleOpClick = (event) => {
    console.log('------------event------', event.target.value);
    console.log(this.state.currentVal);
    this.setState({
      currentVal: 'test'
    })
  }

Answer 2

您需要将handleOpClick绑定到组件实例上下文（this）。您可以使用ES6箭头功能来实现此目的。

 handleOpClick = (event) => {
    console.log('------------event------', event.target.value);
    console.log(this.state.currentVal);
    this.setState({
      currentVal: 'test'
    })
  }