在反应中访问 class 内的状态

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;

当我尝试访问 class 的 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)

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

谢谢

Answer 1

您需要将 handleOpClick 绑定到组件实例上下文 (this)。您可以使用 ES6 箭头函数来实现此目的。

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

Answer 2

当你使用ES5时，你可以像上面那样使用handleOpClick={this.handleOpClick}。但在 ES6 中，您应该将上下文绑定到当前 class，您可以使用以下三种方式之一来完成此操作。

你可以把你所有的handleOpClick={this.handleOpClick}改成handleOpClick={this.handleOpClick.bind(this)}
或者，将所有 handleOpClick={this.handleOpClick} 更改为箭头函数，如 handleOpClick={evt => this.handleOpClick(evt)}
或者，保留所有handleOpClick={this.handleOpClick}，但将原来的方法handleOpClick改成Panther提到的箭头函数。

喜欢，

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

在反应中访问 class 内的状态

accessing state inside class in react

ecmascript-6

reactjs

es6-class