コンポーネント内のヘルパー関数の結果に基づく状態の変更

Question

私は、アプリケーションコンポーネントにヘルパー関数をインポートしました。これは、テキスト入力フォームの送信後に起動し、その関数の結果に基づいてすぐに状態を設定します。しかし、状態は同じままです - 私はテスト関数から「偽」を返します。

どのようにこの機能で状態を変更できますか？マイアプリのコンポーネント：

import 'materialize-css/dist/css/materialize.min.css'; 
import React, { Component } from "react"; 
import { test } from './testBalance' 

import Nav from './Nav' 

class App extends Component { 

    constructor(props){ 
    super(props) 

    this.state = { 
     text: '', 
     isTested: true 
    } 
    } 

    handleSubmit(e){ 
    e.preventDefault(); 

    if(!test(this.state.text)){ 
     this.setState({ 
     isTested: false 
     }) 
    } 
    } 

    handleChange(e){ 
    this.setState({ 
     text: e.target.value 
    }) 
    } 


    render() { 
    return(
     <div className="container"> 
     <Nav/> 
     <h1 className="black-text">Test balanced parenthesis in the box below..</h1> 
     <form onSubmit={(e) => this.handleSubmit(e)}> 
      <input type="text" value={this.state.text} onChange={(e) => this.handleChange(e)}/> 
     </form> 
     </div> 
    ) 
    } 
} 

export default App; 

私のテスト機能：

export function test(text){ 
    return false 
} 

Answer 1

私はあなたがhandleSubmitとhandleChangeの内部thisが実際にクラスを参照するように、あなたのコールバック関数をバインドする必要があると考えています。

constructor(){ 
    ... 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleChange = this.handleChange.bind(this); 
} 

また、私はそうのようなhandleSubmitを変更することはお勧めします：あなたはまた、単にそう

<form onSubmit={this.handleSubmit} ... >