与组件反应引用

小编典典

与组件反应引用

reactjs

我有React表单，其中有一个用于渲染下拉菜单的Component，因为这些选项来自API。但是，我无法访问嵌入式组件的引用。我正在整理我的第一个表格，并试图了解解决此问题的最佳方法。

var ActivityForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();

    var noteCategoryId = this.refs.note_category_id.getDOMNode().value.trim();
    var content = this.refs.content.getDOMNode().value.trim();

    if (!category || !content) {
      return;
    }

    // this.props.onCommentSubmit({author: author, text: text});

    this.refs.note_category_id.getDOMNode().value = '';
    this.refs.content.getDOMNode().value = '';
    return;
  },
  render: function() {
    return (
      <div className="new-activity">
        <h3>New Activity</h3>
        <form onSubmit={this.handleSubmit}>
          <textarea ref='content' />
          <br />

          <label>Category</label>
          <ActivityFormCategoryDropdown /> # THE REF IN THIS COMPONENT ISN'T ACCESSIBLE
          <br />

          <input type="submit" value="Add Activity" />
        </form>
      </div>
    );
  }
});

阅读 236

2020-07-22

共1个答案

小编典典

最好将ref视为回调属性，并且不再依赖于refsObject。如果确实使用refs对象，请避免访问refs后代组件。您应该将其refs视为私有访问器，而不应将其视为组件API的一部分。仅将组件实例上公开的方法视为其公共API。

对于这种情况，我建议从Submit事件中获取表单，并根据需要遍历其子表单元素。添加name属性，因为这是在标准表单提交中识别表单元素的方式，因此您完全不需要refs：

var ActivityForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var form = e.target;

    // Use the standard [`HTMLFormElement.elements`][1] collection
    //
    // [1]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements
    var content = form.elements['content'].value;

    // do more things with other named form elements
  },
  render: function() {
    return (
      <div className="new-activity">
        <h3>New Activity</h3>
        <form onSubmit={this.handleSubmit}>
          <textarea name='content' />
          <br />

          <label>Category</label>
          <ActivityFormCategoryDropdown />
          <br />

          <input type="submit" value="Add Activity" />
        </form>
      </div>
    );
  }
});

2016年9月21日更新：根据字符串属性文档的refs指导，修订建议以避免对象全部在一起。ref

2020-07-22