在反應中訪問類內的狀態

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到組件實例上下文（這一點）。您可以使用ES6箭頭功能來實現此目的。

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