我有一个模式,其中有一个带有类别的下拉列表。 当我选择一个类别时,会显示一个带有分类的下拉列表。 如果我选择分类,则会渲染另一个组件。
我第一次选择类别和分类时效果很好。 但是,如果我想再次选择一个类别,我会收到以下错误:
Uncaught Error: Invariant Violation: findComponentRoot(..., .0.2.1.0.0.1.0.2.1.0.0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.
我查了一下,但通常会在使用<table>
组件时出现。我没有使用<table>
。
模态的代码在下面:
getInitialState: function() {
return {categorySelected: false};
},
handleSelectCat: function(event) {
var index = event.target.value;
this.setState({categorySelected: true});
this.setState({classificationSelected: false});
var classificationDesc = this.props.categories[index].classes.map(function (elem, index) {
return <option value={index}><a href="#">{elem.description}</a></option>
});
this.setState({classificationDesc: classificationDesc});
},
handleSelectClass: function(event) {
var index = event.target.value;
this.setState({classificationSelected: true});
},
closeModal: function() {
this.setState({categorySelected: false});
this.setState({classificationSelected: false});
},
render: function() {
var categoryDesc = this.props.categories.map(function (elem, index) {
return <option value={index}>{elem.description}</option>
});
return (
<div id="newListModal" className="modal fade" role="dialog">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal">×</button>
<h4 className="modal-title">Create new list</h4>
</div>
<div className="modal-body">
<div>
<p>Select category</p>
<select class="form-control" onChange={this.handleSelectCat}>
{categoryDesc}
</select>
{this.state.categorySelected == true
?
<div>
<p>Select classification</p>
<select class="form-control" onChange={this.handleSelectClass}>
{this.state.classificationDesc}
</select>
</div>
:
<div></div>}
{this.state.classificationSelected == true
?
<ListAddition classification={this.props.data}/>
:
<div></div>
}
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal" onClick={this.closeModal}>Close</button>
</div>
</div>
</div>
</div>
)
}
答案 0 :(得分:1)
var classificationDesc = this.props.categories[index].classes.map(function (elem, index) {
return <option value={index}><a href="#">{elem.description}</a></option>
});
<a>
内有<option>
个标记。这不是标准的,浏览器可能会删除它与React vDOM冲突