Question

我有一个反应组件，它呈现一个t-comb形式。表格似乎没问题。

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

但是在方法“onFormChange”中我想调用通常正常工作的this.refs.form.getValue()。但这次this.refs是一个空对象。知道为什么它是空的吗？

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 
}

作为信息。我正在使用旧的createClass语法反应0.13.3。所以这应该被正确绑定

Answer 1

来自refs的反应文档（http://facebook.github.io/react/docs/more-about-refs.html）。

对于复合组件，引用将引用组件类的实例，以便您可以调用在该类上定义的任何方法。如果你需要访问该组件的底层DOM节点，你可以使用ReactDOM.findDOMNode作为“逃生舱”但我们不推荐它，因为它打破了封装，几乎在所有情况下都有一种更清晰的方法来构建你的代码React模型。

注意到你正在使用react 0.13。在这种情况下，请尝试React.findDOMNode（this.refs.form）。

Answer 2

错误发生在我正在使用的库t-comb-form中。我在表单中有一个表单，并且库正在处理内部表单很好，但不知何故从外部销毁了引用。

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

2 个答案: