CODEWITHSUNDEEP
javascriptreactjs
Safari
Safari

Reputation: 3382

this.refs is an empty object, although it should be set

I have a react component which is rendering a t-comb-form. The form seems to render alright.

return (
  <form className="modal-body-form"
              autoCorrect="off"
              autoCapitalize="none"
              autoComplete="off"
              formMethod="post"
              onSubmit={function(e) {e.preventDefault();}}
            >
     <Form ref="form"
                onChange={this.onFormChange}
                type={eventSchema.struct}
                value={this.state.rawItem}
                options={eventSchema.options}/>
  </form>
);

But in the method "onFormChange" I want to call this.refs.form.getValue() which is usually working. But this time this.refs is an empty object. Any idea why it is empty?

onFormChange: function (rawValue) {
    var modified = false;

    modified = isDataEqual(this.state.itemStoreState.selectedItem || {}, rawValue) === false;

    this.setState({
      rawItem: rawValue,
      modified: modified
    });

    this.refs.form.getValue(); // will automatically trigger the form validation 
}

as an info. I am using react 0.13.3 with the old createClass syntax. So the this should be correctly bound

Upvotes: 4

Views: 5479

Answers (2)

Safari
Safari

Reputation: 3382

The error was in the library t-comb-form which I am using. I had a form inside a form and the library was handling the inner form great, but somehow destroyed the refs from outside.

Upvotes: 0

J. Mark Stevens
J. Mark Stevens

Reputation: 4945

From the react docs about refs (http://facebook.github.io/react/docs/more-about-refs.html).

For composite components, the reference will refer to an instance of the component class so you can invoke any methods that are defined on that class. If you need access to the underlying DOM node for that component, you can use ReactDOM.findDOMNode as an "escape hatch" but we don't recommend it since it breaks encapsulation and in almost every case there's a clearer way to structure your code within the React model.

Just noticed that you are using react 0.13. In that case try React.findDOMNode(this.refs.form).

Upvotes: 3

Related Questions