我是react js
的新手。在这里,我确实有一个模态->
ErrorComponent.js
import React from 'react';
export default class ErrorComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
)
}
}
**LowLeveLCriteria.js**
class LowLevelCriteria extends React.Component {
constructor(props) {
super(props);
this.state = {
technologies: this.props.techData,
lowData: this.props.lowData.low,
showModal: false
}
}
validate (v1, v2) { return "1" }
onaddRow(e, id) {
const errors = this.validate("value1", "value2");
if (errors === "1") {
} else {
this.setState({
showModal: true
})
}
render() {
return (
<div>
<div className="questionLevelIndication">
<span className="levelIndicatorBtn backgroundColorForLow">
1
</span>
<label className="levelIndicationLabel">
Low Difficulty Level - Maximum 6 questions
</label>
</div>
{(this.props.lowData) && this.props.lowData.Low.length > 0 && this.props.lowData.Low.map(data => (
<LowRow technologies={this.state.technologies} onChange={this.onchange.bind(this)} data={data} key={data.id} onAddRow={this.onaddRow.bind(this)} onRemoveRow={this.onRemoveRow.bind(this)} />
))}
{this.state.showModal && <ErrorComponent />}
</div>
)
}
<button type="button" className="btn btn-primary btn-sm standard-btn-50 margin-left-10" onClick={(e) => { props.onAddRow(e, props.data.id) }}>+</button>
现在,在这里,当我单击作为子元素的按钮,然后调用在父组件中为AddRow
的方法时。现在,在这里,我想要做的是
如果单击该按钮后,我在add函数中调用了另一个函数,该函数将进行验证,然后返回一些信息。如果有一个值为“ 1”,那么我想向用户显示该模式。所以,
我没有办法。我怎样才能做到这一点 ?因为要打开模式,我们需要有一个数据目标,该目标必须位于按钮上,但是我的按钮在另一个组件中。因此,
我尝试了document.getElementById,然后在单击按钮后添加了data target属性。但是没有运气。有人可以给我一点提示吗?
答案 0 :(得分:0)
您尝试渲染的所有子组件都应在组件的render()
方法内。
如果我没记错的话,您是在尝试从处理程序中呈现<ErrorComponent />
,因此它将无法正常工作。如果您尝试使用函数声明创建有状态组件,请参阅ref链接1的第一部分。
我建议您采用的一种方法是:
dataTarget
,并在按钮处理程序内将其更改为true
。<ErrorComponent />
内渲染render()
在处理程序中更改dataTarget
状态时,它将导致组件重新呈现,并且ErrorComponent
将显示。
请参考此处: