How to properly wire async callbacks with form manipulations in react?

Question

Was recently building similar component to facebook's comment tutorial, so I've picked the same code and realized it lacks callback-based input clearing. So what's the best way to wire that into react/flux architecture?

So _id & name inputs are being cleared independent to success of the form submit.

  handleSubmit: function(e) {
    e.preventDefault();
    var _id = this.refs._id.getDOMNode().value.trim();
    var name = this.refs.name.getDOMNode().value.trim();
    if (!_id || !name) {
      return;
    }
    this.props.onCommentSubmit({_id: _id, name: name});
    this.refs._id.getDOMNode().value = '';
    this.refs.name.getDOMNode().value = '';
  },

Answer 1

You should not need to manipulate DOM nodes with React.

Why don't you try using state?

getDefaultState: function() {
  return {
    _id: '',
    name: ''
  };
},

handleSubmit: function() {
  if (!this.state._id || !this.state.name) {
    return;
  }
  this.props.onCommentSubmit({
    _id: this.state._id,
    name: this.state.name
  });
  this.setState({
    _id: '',
    name: ''
  });
},

onNameChange: function(value) {
  this.setState({ name: value});
},

onIdChange: function(value) {
  this.setState({ _id: value });
},

render: function() {
  return (
    <div>
      <input defaultValue={this.state._id} onChange={this.onIdChange} />
      <input defaultValue={this.state.name} onChange={this.onNameChange} />
    </div>
  );
}