我正在使用React和Fluxxor来创建一个像可视组件的树 . 对于树中的每个节点,我想提供删除/编辑节点或添加新子节点等基本功能 . 所以每个节点都有自己的下拉菜单用于这些操作,下拉菜单是用MaterializeCss Framework完成的,最初我在render方法中创建了每个节点但是然后导致了一个React错误,我通过在render函数中渲染一个标记触发器来解决,用于菜单的ul是在componentDidMount函数中创建的,使用Jquery 's append on the body element. The problem is that I want to map each of these actions to functions define in the React component, but it doesn' t解决它永远不会被调用,我该怎么做 .
var ItemOferta = React.createClass({
mixins: [FluxMixin],
componentDidMount: function() {
var id = "dd"+this.props.item.self.id;
$("body").append(
"<ul id='"+id+"' class='dropdown-content'>"+
"<li><a href='javascript:void(0)'>Agregar hijo</a></li>"+
"<li><a href='javascript:void(0)'>Editar</a></li>"+
"<li><a href='javascript:void(0)' onclick='"+this.eliminar+"'>"+
"Eliminar</a></li></ul>");
},
componentWillUnmount: function(){
var id = "#dd"+this.props.item.self.id;
$(id).remove();
},
eliminar: function(e){
console.log("En el metodo eliminar");
this.getFlux().actions.eliminarNivel(this.props.item.self.id);
},
render: function(){
...
<div className="acciones">
<a href="#" className="accion dropdown-button"
data-activates={"dd"+this.props.item.self.id}>
<i className="mdi-navigation-more-vert"></i>
</a>
</div>
...
);
}
});
我省略了渲染方法的一些代码,我只发布了下拉触发器的代码,你可以在onclick属性中看到我尝试绑定this.eliminar函数,但是当我用chrome工具检查它时,所有出现的都是这个“function(){[native code]}”
1 回答
你正在做的是反对React 's principle. Changing the DOM elements will make React'的DOM差异化荒谬 . 你可以修改你的代码,如下所示 . But highly not recommended.
以React方式执行此操作的正确方法如下所示 .