reactjs - 在 react 中访问类内的状态

Question

我有以下 react 组件代码。

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)

如何访问组件类方法内的状态。我想编写通用逻辑来处理运算符(operator)点击。我哪里出错了？

谢谢

Answer 1

当您使用ES5时，您可以使用handleOpClick={this.handleOpClick}如上。但在 ES6 ，您应该将上下文绑定(bind)到当前类，并且可以使用以下三种方法之一来执行此操作。

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'
    })
  }