Modification de l'état basé sur le résultat de la fonction d'assistance dans le composant

Question

J'ai importé une fonction d'assistance dans mon composant App qui doit être déclenchée après la soumission d'un formulaire de saisie de texte, puis immédiatement définir l'état sur la base du résultat de cette fonction. Cependant, l'état reste le même - même si je retourne 'faux' de la fonction de test.

Comment changer l'état avec cette fonction? Mon composant App:

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; 

ma fonction de test:

export function test(text){ 
    return false 
} 

Answer 1

Je crois que vous devez lier vos fonctions de rappel afin que le this intérieur de handleSubmit et handleChange fait référence à la classe.

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

Je voudrais également recommander de changer handleSubmit comme ceci:

handleSubmit(e){ 
    e.preventDefault(); 

    this.setState({ 
     isTested: test(this.state.text), 
    }) 
} 

Vous pouvez aussi passer this.handleSubmit comme le rappel directement comme si

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