-1
votes

setState est ignoré dans handleSubmit

Lorsque le formulaire soumis, la valeur doit être 2.

this.state = { dog: 1 };
this.handleSubmit = this.handleSubmit.bind(this);
handleSubmit(e) {e.preventDefault(); this.setState({dog: 2})}
<Form onSubmit={this.handleSubmit}><Button variant="primary" 
type="submit">Submit</Button></Form>

javascript reactjs

2 commentaires

Montrez le reste de votre code - d'où vient le composant Form ? Passe-t-il un argument d'événement à handleSubmit ?

Honnêtement, votre logique de code semble correcte? Vous ne configurez probablement pas correctement le composant de classe.

4 Réponses :

0
votes

L'état du paramètre est asynchrone, il se peut donc que vous ne puissiez pas voir l'état modifié juste après l'avoir défini.

handleSubmit(e) {
  e.preventDefault()
  this.setState({dog: 2}, ()=>console.log(this.state.dog))
}

Il consolera 2 .

0 commentaires

0
votes

Cela aidera à comprendre comment setState se produit:

    constructor(props) {
        super();
        this.state = {
            dog: 1
        };
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault()
        this.setState({ dog: 2 }, () => {
            console.log(this.state.dog)
        })
    }

    render() {
        const { dog } = this.state;
        return (
            <>
                <span>Dog Value : {dog}</span>
                <form onSubmit={this.handleSubmit}>
                    <button variant="primary" type="submit">Submit</button>
                </form>
            </>
        )
    }

0 commentaires

0
votes

 class App extends Component {
  constructor(props) {
    super();
    this.state = { dog: 1 };
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(e) {
    e.preventDefault();
    this.setState({ dog: 2 });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <button> Submit</button>
        <p>{this.state.dog}</p>
      </form>
    );
  }
}
This works just fine. What is Form ? Did you mean form?Using your code you could try adding handleSubmit to the button's onClick to see if your state updates.

0 commentaires

1
votes

Tout d'abord, vous devez passer les accessoires dans super()

handleSubmit = (event) => {
    event.preventDefault()
    this.setState({dog: 2})
}

<Form onSubmit={this.handleSubmit}>
    <Button variant="primary" type="submit">Submit</Button>
</Form>

La fonction de flèche résoudrait le problème de this

 constructor(props) {
    super(props);
    this.state = { dog: 1 };
}

1 commentaires

c'est une bonne réponse, mais modifiez le formulaire pour qu'il soit formulaire s'il utilise bootstrap