我有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> ); } });
最好将ref视为回调属性,并且不再依赖于refsObject。如果确实使用refs对象,请避免访问refs后代组件。您应该将其refs视为私有访问器,而不应将其视为组件API的一部分。仅将组件实例上公开的方法视为其公共API。
ref
refs
对于这种情况,我建议从Submit事件中获取表单,并根据需要遍历其子表单元素。添加name属性,因为这是在标准表单提交中识别表单元素的方式,因此您完全不需要refs:
name
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