React.js插入到另一个组件的ref中
React.js insert into ref of another component
我刚开始学习react.js,遇到了找不到答案的情况。
这是我的组件结构(这只是为了显示层次结构):
-- ItemContainer
----- ItemList
-------- ItemSingle
----- ItemForm
其中ItemList和ItemForm是ItemContainer的兄弟姊妹。ItemSingle是ItemList的子元素。
在每个ItemSingle我有一个"编辑"按钮,应该更新其内容的形式,但我不能从ItemSingle发送到ItemForm.refs。
这是我尝试过的
ItemSingle组件:
var ItemSingle = React.createClass({
insertEdit: function(edit_item, e){
e.preventDefault();
React.findDOMNode(ItemForm.refs.title).value = edit_item.title;
React.findDOMNode(ItemForm.refs.content).value = edit_item.content;
},
render: function() {
return (
<div className="box">
<div className="box-body bigger-box">
<h4>
<strong>#{this.props.index + 1}</strong>
<span className="title">{this.props.title}</span>
<span className="float-right box-option">
<a href="#" onClick={this.insertEdit.bind(this, this.props)}>Edit</a>
</span>
</h4>
<div className="text" dangerouslySetInnerHTML={{__html: this.props.content}} />
</div>
</div>
);
}
});
ItemForm组件:
var ItemForm = React.createClass({
handleSubmit: function(e) {
e.preventDefault();
var title = React.findDOMNode(this.refs.title).value.trim();
var content = React.findDOMNode(this.refs.content).value.trim();
if(!title || !content){ return false; }
this.props.onItemsAdd({title: title, content: content});
React.findDOMNode(this.refs.title).value = '';
React.findDOMNode(this.refs.content).value = '';
$('textarea').trumbowyg('empty');
return true;
},
componentDidMount: function() {
$('textarea').trumbowyg();
},
render: function() {
return (
<div className="form-container">
<form className="form" method="POST">
<div className="form-group">
<input type="text" className="form-control" ref="title"/>
</div>
<div className="form-group">
<textarea ref="content"></textarea>
</div>
<div className="form-group">
<a className="btn btn-success btn-flat btn-block btn-lg" onClick={this.handleSubmit}><i className="fa fa-save"></i> Save</a>
</div>
</form>
</div>
);
}
});
这是我在ItemSingle第4行得到的错误:
Uncaught TypeError: Cannot read property 'title' of undefined
React中的ref不是这样使用的。
如果你没有用React编写过几个应用程序,你的第一倾向通常是尝试在你的应用程序中使用refs来"让事情发生"。如果是这种情况,花点时间更批判性地思考一下state应该在组件层次结构中拥有的位置。通常,很明显,"拥有"该状态的适当位置是在层次结构中的更高级别。将状态放置在那里通常会消除使用引用来"使事情发生"的任何愿望-相反,数据流通常会完成您的目标。
在你的应用程序中,你将需要state
,可能在ItemList
组件中,并且应该将更改此状态的方法传递给ItemSingle
组件。
相关文章:
- React重新渲染但未显示正确的组件
- 不能从angular2中的子组件指定父组件中的数组
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- React组件等待所需道具进行渲染
- 如何创建带有插槽的vue js组件预加载程序
- KnockoutJS-组件-多个实例
- 如何更改reactjs中外部/独立组件的状态或属性
- 如何在react js中将值从一个组件发送到另一个组件
- React Native通过Navigator将用户输入数据传递到选项卡栏IOS中的组件
- React组件-设置页面标题
- 我的shareService在angular 2中发送值工作正常,但当我渲染我的另一个组件时,会获得默认值
- 如何在salesforce aura闪电组件中使用jQuery.val()
- 为react组件传递道具的最佳方式
- [Vue warn]:未能解析组件
- React.js如何在内部组件中找到ref元素
- 为什么我的React组件's ref在测试中等于undefined ?
- React.js插入到另一个组件的ref中
- React-Rails:如何使用ref渲染组件
- 如何获取模拟的反应事件以更新组件中 ref 的值
- 只有ReactOwner才能拥有refs.您可能正在向组件添加一个ref,而该ref不是在组件的render方法中创建的