Clearing an input field after submit with React

Question

I'm making a comment form with React. I've almost built what I want except this little issue, where I'm not able to clear my input value, after I submit the form. What I typed in stays in the input field even after submitting.

My code:

CommentsIndex.js

class CommentsIndex extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      url: this.props.url,
      comment: '',
    };
    this.onSubmit2 = this.onSubmit2.bind(this);
  }
  loadCommentsFromServer() {
    $.ajax({
      // ajax call working fine
    });
  }
  onSubmit2(value) {
    const url = this.props.url;
    $.ajax({
      url: url,
      dataType: 'text',
      type: 'POST',
      cache: false,
      data: {
        comment: value
      },
      success: (data) => {
        this.loadCommentsFromServer();
      },
      error: (xhr, status, err) => {
        console.error(url, status, err.toString());
      },
    });
  }
  componentDidMount() {
    this.loadCommentsFromServer();
  }
  render() {
    return (
      <div>
        <NewComment onSubmit1={this.onSubmit2} />
        <Comments comments={this.state.comments} />
      </div>
    );
  }
}

export default CommentsIndex;

NewComment.js

class NewComment extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      comment: ''
    };
    this.getInput = this.getInput.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
  }
  getInput(e) {
    this.setState({
      comment: e.target.value
    });
  }
  onSubmit() {
    this.props.onSubmit1(this.state.comment);
  }
  render() {
    return (
      <div>
        <input className="comment-field" onChange={this.getInput} />
        <input className="comment-submit" type="submit" value="SUBMIT" onClick={this.onSubmit} />
      </div>
    );
  }
}

export default NewComment;

I tried adding this.setState({ value: '' }) inside success: (data) => {} in my onSubmit2(), but it didn't work.

Any advise would be appreciated. Thanks in advance!

Use ref={(input)=>this.input=input} in input text and in onClick set this.input.value=''. It will work for 100% — Rutvik Bhatt
– Rutvik Bhatt, Commented Dec 7, 2018 at 4:22
@RutvikBhatt Do you mean <input className="comment-field" onChange={this.getInput} ref={(input)=>this.input=input} />? And how can I set this.input.value='' in onClick when I already have onClick={this.onSubmit}? Sorry I'm a bit confused. — ta539tg70
– ta539tg70, Commented Dec 7, 2018 at 5:21

Rutvik Bhatt · Accepted Answer · 2018-12-07 05:46:07Z

1

add a reference like ref={(input)=>this.commentInput=input} below:

<div>
    <input ref={(input)=>this.commentInput=input} className="comment-field" onChange={this.getInput} />
    <input className="comment-submit" type="submit" value="SUBMIT" onClick={this.onSubmit} />
</div>

and in your onSubmitMethod do the code like below:

onSubmit() {
    this.props.onSubmit1(this.state.comment);
    this.commentInput.value='';
}

set the value '' after callback to props

answered Dec 7, 2018 at 5:46

Rutvik Bhatt

3,3062 gold badges19 silver badges28 bronze badges

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

1 Comment

ta539tg70 Over a year ago

Worked perfectly. Thank you so much!

Vishal · Accepted Answer · 2018-12-07 04:16:17Z

1

On success of ajax request, set state to '' as below:

this.setState({
  comment: ''
});

And bind state to input field as follows:

<input value={this.state.comment} className="comment-field" onChange={this.getInput} />

answered Dec 7, 2018 at 4:16

Vishal

11k22 gold badges90 silver badges136 bronze badges

1 Comment

Vishal Over a year ago

Aah, did not read the whole question. Assumed the ajax req and form are in same component. My bad.

Agney · Accepted Answer · 2018-12-07 05:47:03Z

If the input elements are inside a form, then

form.reset()

can be used to reset all the form components on submit.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }
  onSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const name = event.target.name.value;
    console.log(name);
    form.reset();
  }
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" name="name" placeholder="Name" />
        <button>Submit</button>
      </form>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>

Collectives™ on Stack Overflow

Clearing an input field after submit with React

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related