this.refs是一个空对象，虽然它应该被设置

Question

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

Answer 1

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).

Answer 2

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.