我有一个简单的模态:
renderModalForm() {
return (
<Modal
closeTimeoutMS={150}
show={this.state.isModalOpen}
onHide={this.isModalOpen.bind(this)}
>
<Modal.Body>
<div className="close-button-modal">
<i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}></i>
<div className="clearfix"></div>
</div>
<div ref="test" className="testclassname">
</div>
</Modal.Body>
</Modal>
);
}
我唯一的目标是向div
ref="test"
注入一个自定义属性(不幸的是,它不能以数据或咏叹调开头,因为它是由第三方定义的)
当我尝试注入自定义属性时:
someButtonClicked() {
setTimeout(() => {
this.setState({
isModalOpen: true
})
}, 100);
var element = ReactDOM.findDOMNode(this.refs.test);
element.setAttribute('doku-div', 'form-payment');
}
此处元素始终未定义,因此setAttribute
失败;如果我去检查元素,ref="test"
上就不存在<div>
!有人可以帮我解释为什么在模态中缺少这个引用吗?
答案 0 :(得分:0)
尝试将代码移至ComponentDidMount
或ComponentDidUpdate
方法。那里的参考不应该是不确定的。
您还可以使用回调来存储对DOM节点的引用:
<Modal.Body>
<div className="close-button-modal">
<i className="fa fa-times fa-2x pull-right" onClick={this.onButtonClick.bind(this)}></i>
<div className="clearfix"></div>
</div>
<div ref="{(testNode) => { this.testNode = testNode; }}" className="testclassname">
</div>
</Modal.Body>
然后使用该引用而不是使用ReactDOM:
someButtonClicked() {
setTimeout(() => {
this.setState({
isModalOpen: true
})
}, 100);
var element = this.testNode;
this.testNode.setAttribute('doku-div', 'form-payment');
}