Dev Faq
0
votes

Le gestionnaire d'événements ONSUBMIT ne fonctionne pas dans le formulaire ReactJS

Je suis nouveau pour réagir et avoir ce formulaire: 

class CustomForm extends React.Component {

    handleFormSubmit = (e) => {
        e.preventDefault();
        const title = e.target.elements.title.value;
        const content = e.target.elements.content.value;
        console.log(title, content)
    }

    render() {
        return (
            <div>
                <Form onSubmit={ this.handleFormSubmit }>
                    <FormItem label='Title'>
                        <Input name='title' placeholder='Put a title here' />
                    </FormItem>
                    <FormItem label='Content'>
                        <Input name='content' placeholder='Enter some content' />
                    </FormItem>
                    <FormItem>
                        <Button type='primary' htmlType='submit'>Submit</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

1 commentaires

Tous vos composants sont personnalisés, utilisez peut-être des composants standard ref: réactjs.org/docs/forms.htmlled

3 Réponses :

0
votes

bouton avec type = 'Soumettre' déclenchera le formulaire OnSubmit Handler

0 commentaires
2
votes

à partir de votre code, on dirait que vous utilisez un composant personnalisé .. Ce n'est pas le normal car personnalisé Le composant peut ne pas avoir le PROP ONSUBMIT . Passer par la documentation du composant que vous utilisez.

0 commentaires
0
votes

Vous devez lier les gestionnaires d'événements dans le constructeur afin de travailler. En savoir plus ici https://reactjs.org/docs/handling-events.html : 

class CustomForm extends React.Component {    
    constructor(props) {
     super(props)

      this.handleFormSubmit = this.handleFormSubmit.bind(this)
     }

    handleFormSubmit = (e) => {
        e.preventDefault();
        const title = e.target.elements.title.value;
        const content = e.target.elements.content.value;
        console.log(title, content)
    }

    render() {
        return (
            <div>
                <Form onSubmit={ this.handleFormSubmit }>
                    <FormItem label='Title'>
                        <Input name='title' placeholder='Put a title here' />
                    </FormItem>
                    <FormItem label='Content'>
                        <Input name='content' placeholder='Enter some content' />
                    </FormItem>
                    <FormItem>
                        <Button type='primary' htmlType='submit'>Submit</Button>
                    </FormItem>
                </Form>
            </div>
        )
    }
}

0 commentaires

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO