how can I clear input field in react after click submit in my case?

Question

can anyone please tell me how to clear all the inputs after I click submit on my homepage component? I tried using reset() after preventdefault in subjectForm component but either I used it wrong or it did not work. I also tried to use setState and put my inputs back to default state which is empty but it also did not work.

everything in my code works fine, but every time I submit a subject, the field does not clear itself

this is my homepage component.

    import React from 'react';
    import SubjectForm from './SubjectForm';
    import {addSubject} from '../actions/subjectAction';
    import {connect} from 'react-redux';

    const HomePage=({dispatch})=>(
        <div>
             <SubjectForm onSubmit ={(subject)=>
                  dispatch(addSubject(subject))
             }/>
</div>
    )

    export default connect()(HomePage);

this is my subjectForm component

import React from 'react';

export default class SubjectForm extends React.Component{
    constructor(props){
        super(props);
        this.state={...} 
    onNameChange =(e)=>{...}  
    onHourChange =(e)=>{...}

    onSubmit=(e)=>{
        e.preventDefault();

        **//I tried using reset() here but it did not work**

        if(!this.state.subjectName){...}

    render(){
        return (
            <div>
                {this.state.error && <p>{this.state.error}</p>}
                <form className='test' onSubmit={this.onSubmit}>
                    <input 
                        type="text"
                        placeholder='enter name'
                        autoFocus
                        value={this.state.subjectName}
                        onChange={this.onNameChange}
                    />
                    <input 
                        type="number"
                        placeholder='enter hour'
                        value={this.state.hour}
                        onChange={this.onHourChange}
                    />
                    <button>Add Subject</button>
                </form>
            </div> 
        )
    }
}

this is my onSubmit function when I tried to return subject to empty.

onSubmit=(e)=>{
    e.preventDefault();
    if(!this.state.subjectName){
        this.setState(()=>({error:'please enter subject name'}))
    }
    else if(!this.state.hour && !this.state.minute){
        this.setState(()=>({error:'please enter time'}))
    }else {
        this.setState(()=>({error:''}));
        this.props.onSubmit({
            subjectName:this.state.subjectName,
            hour:this.state.hour,
            minute:this.state.minute,
            note:this.state.note
         }, console.log(this.state),
        )
        this.setState(()=>({
            subjectName:'',
            hour:0,
            minute:0,
            note:'',
            error:''
        }));
    }
}

U Rogel · Accepted Answer · 2017-12-10 13:27:19Z

5

Since you are using your state to control the input fields, you should reset the state.field and it will reset the field. So:

onSubmit=(e)=>{
    e.preventDefault();

    **//I tried using reset() here but it did not work**

    if(!this.state.subjectName){...}

    // after finishing all you want to do with it:
    this.setState({
        hour: '', // or any other initial value you have
        subjectName: '',
    });
}

edited Dec 10, 2017 at 13:27

answered Dec 10, 2017 at 7:49

U Rogel

1,95117 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Nhat Over a year ago

I did that, this is my code in on Submit when I tried that onSubmit=(e)=>{ if(!this.state.subjectName){ this.setState(()=>({error:'please enter subject name'})) } else if(!this.state.hour && !this.state.minute){ this.setState(()=>({error:'please enter time'})) }else { this.setState(()=>({error:''})); this.props.onSubmit({ subjectName:'', hour:0, minute:0, note:'' } ) } }

U Rogel Over a year ago

Please add it to your post to make it more easy to read and to show what have you tried so far.

Nhat Over a year ago

I did that, could you please take a look?

U Rogel Over a year ago

I've edited the answer accordingly, you use this.setState without another inner function.

Collectives™ on Stack Overflow

how can I clear input field in react after click submit in my case?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related