Form onSubmit not working in ReactJs and MeteorJs application

help
1

I have a ReactJs component. handleSubmit is not called when my form is submitted. I am using meteorJs as my backend and ReactJs as my frontend library. I don’t know where is the problem. I tried commenting out everything except input tag but didn’t work.

import React, {Component} from 'react';

export default class ConfessionPoster extends Component {

    constructor(props) {
        super(props);
        this.state = {
            value: ''
        };

        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleInputChange = this.handleInputChange.bind(this);
    }

    //handle form submit
    handleSubmit(event) {
        event.preventDefault();
        console.log("We are in handle");
        console.log(this.state.value);
    }

    handleInputChange(event) {
        event.preventDefault();

        // const target = event.target;
        // const confessionValue = target.value;
        // const confessionName = target.name;
        //
        // this.setState({[confessionName]: confessionValue});
        // console.log(this.state.confessionText);

        this.setState({value: event.target.value});
        console.log(this.state.value);
    }

    render() {
        return (

            <div id="confession-poster" className="modal">

                <div className="modal-content">

                    <div className="row">
                        <div className="col s1">
                            <i className="material-icons prefix">account_circle</i>
                        </div>
                        <div className="col s11">
                            <h6>Kiran Kumar Chaudhary</h6>
                        </div>
                    </div>

                    <form onSubmit={this.handleSubmit}>

                        <div className="row confession-area">

                            <div className="input-field col s12">
                                <label htmlFor="confession-textarea">Your Confession</label>
                                <textarea id="confession-textarea" className="materialize-textarea" value={this.state.value} onChange={this.handleInputChange}/>
                            </div>

                        </div>

                        <div className="row">

                            <div className="col s12">
                                <i className="material-icons">photo_camera</i>&nbsp;
                                <i className="material-icons">link</i>&nbsp;
                                <i className="material-icons">location_on</i>
                            </div>

                        </div>

                        <div className="row">

                            <div className="input-field col s12">
                                <input type="checkbox" className="filled-in" id="hide-my-identity" defaultChecked/>
                                <label htmlFor="hide-my-identity">Hide my Identity</label>
                            </div>

                        </div>

                        <div className="row">
                            <input className="btn" type="submit" value="Post"/>
                        </div>

                    </form>

                </div>

            </div>

        );
    }
}
2

I recommend to use a form library like https://github.com/vazco/uniforms/ for form-handling in react

3

@macrozone I will use this later. How can I solve my issue in above code for now?

4

i don’t see an issue. Are you sure that handleSubmit is not called? no errors or so in the console?

5

@kiran2020 Just try to remove MaterializeCSS for a moment, and look if the onSubmit works then. Maybe it’s causing the issue.

6

Your don’t happend to have a form inside another form?

7

@macrozone Ya, I tried a lot. handleChange is called but handleSubmit is not responding and there is no any error message or log in the console.

8

@Peppe_LG I have no form inside another form. Form is inside modal content.

9

I have similar form that work. It’s the one that does not work.

10

Hi
the key point is :
<textarea id="confession-textarea" className="materialize-textarea" value={this.state.value} onChange={this.handleInputChange}/>

onSubmit does not know ‘key’ action just know type=“submit” .
so if you key up ‘enter’ , your handleSubmit works.

you can add keyup event to let handleSubmit to work