我将Reactjs与tinyMCE 4.1.10 html编辑器(以及代码插件)和bootsrap css + js元素一起使用。删除了编辑器的一些怪癖后,一个相当有效的设置(如果父元素卸载则手动销毁)
现在问题:代码插件的textarea输入没有收到任何焦点、点击或按键事件,基本被禁用。通过 javascript 设置值效果很好,但它不能用作正常的 html 输入。
打开如下:
我的编辑器初始化如下所示:
componentDidMount: function(){
tinymce.init({
selector: '.widget-tinymce'
, height : 200
, resize : true
, plugins : 'code'
})
}
我的猜测是,react.js 以某种方式阻止或中断了这里的事件。如果我删除 React 模态 DOM,它就可以正常工作。
有人知道是什么导致了这个问题或者如何简单地进一步调试它吗?
非常感谢!
如果您使用的是 Material UI。通过添加属性disableEnforceFocus={true}和可选的disableAutoFocus={true}来禁用Material UI对话框的强制焦点
你的组件中的 html/jsx 是什么样的?
我的猜测是,React 可能会将您的输入视为受控组件
如果您在渲染时设置
value
属性,您将需要等待,然后通过 props 或 state 来完成此操作。
好吧,事实证明 bootstrap modals javascript 以某种方式劫持了这个。为了节省一些时间,我决定不深入研究这个,而只是在 jsx 中创建我自己的模态 js。
显然还有 React Bootstrap,但目前看来,为了接受这种额外的依赖,它对我来说还有很多测试版。
最终的代码如下所示,以防万一它在某个时候变得方便:
Modal = React.createClass({
show: function() {
appBody.addClass('modal-open');
$(this.getDOMNode()).css('opacity', 0).show().scrollTop(0).animate({opacity: 1}, 500);
}
, hide: function(e){
if (e) e.stopPropagation();
if (!e || $(e.target).data('close') == true) {
appBody.removeClass('modal-open');
$(this.getDOMNode()).animate({opacity: 0}, 300, function(){
$(this).hide();
});
}
}
, showLoading: function(){
this.refs.loader.show();
}
, hideLoading: function(){
this.refs.loader.hide();
}
, render: function() {
return (
<div className="modal overlay" tabIndex="-1" role="dialog" data-close="true" onClick={this.hide}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={this.hide} data-close="true" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">{this.props.title}</h4>
</div>
<div className="modal-body" id="overlay-body">
{this.props.children}
<AjaxLoader ref="loader"/>
</div>
</div>
</div>
</div>
);
}
})
最美好的祝愿
安德烈亚斯
Material UI:通过添加属性 disableEnforceFocus={true} 和 (可选)disableAutoFocus={ true}
禁用对话框的强制焦点