小编sil*_*ood的帖子

使用jQuery Emoji插件时,componentDidMount与useEffect的行为不同

我被困在其中一个组件上使用jquery表情符号插件,直到完成要构建的自定义插件。

出于某种原因,当我在componentDidMount内调用emoji插件时,使用自定义按钮显示emoji模态的功能,其他所有东西都起作用。当我使用自定义按钮时,表情符号插件不会将事件附加到按钮上。

疯狂的是,我可以在useEffect中使用相同的代码,并将事件侦听器附加到自定义按钮上。

通过在Web控制台中查看页面加载后附加到元素的事件,我验证了事件监听器是否未附加。

您可以通过将此组件放置在应用程序中的某个位置(并使用emoji-area插件导入jquery)来轻松重现此问题:

import React, {useEffect} from 'react';

  export default function CommentInput(props) {

    useEffect(() => {
      const id = props.blurtId,
            $wysiwyg = $('#' + id).emojiarea({
            button: '#emoji-btn' + id
          });


      $.emojiarea.path = '/js/jquery/emojis/';
      $.emojiarea.icons = {
        ':smile:'     : 'smile.png',
        ':angry:'     : 'angry.png',
        ':flushed:'   : 'flushed.png',
        ':neckbeard:' : 'neckbeard.png',
        ':laughing:'  : 'laughing.png'
      };

   }, []); 

   return (
     <>
        <textarea id={props.blurtId} className='blurt-comment-input' />
        <i id={'emoji-btn' + props.blurtId} className='fa fa-smile emoji-btn' />  
     </>
   )

} …
Run Code Online (Sandbox Code Playgroud)

javascript emoji reactjs

7
推荐指数
2
解决办法
82
查看次数

如何在 Windows 上运行 npx Node.Js 命令

我需要运行以下命令:

$ npx cubejs-cli create <project name> -d <database type>
Run Code Online (Sandbox Code Playgroud)

我已经在我的 Windows 机器上安装了 Node.Js。

我启动 c:\nodejs\node.exe 并打开一个控制台窗口。

我将命令粘贴到命令行中,如下所示:

> $ npx cubejs-cli create trafficninja -d mssql
Run Code Online (Sandbox Code Playgroud)

不幸的是,这不起作用,我收到一个错误:

Uncaught SyntaxError: Unexpected identifier
    $ npx cubejs-cli create trafficninja -d mssql
      ^^^ 
Run Code Online (Sandbox Code Playgroud)

有人可以建议我如何解决这个问题吗?

node.js

5
推荐指数
1
解决办法
3万
查看次数

TinyMCE 与 ReactJs - onChange 事件仅触发一次

我正在将tinyMCE 与我的reactjs 应用程序一起使用。onChange 事件将触发一次,正确反映警报中的输入数据。然后我什么也得不到。

这是相关代码:

<Editor init={{
    statusbar: false,
    menubar: false,
    }}
    onChange={this.SetText}
 />
Run Code Online (Sandbox Code Playgroud)

onChange 方法:

SetText(e) {
    alert(e.target.getContent());
}
Run Code Online (Sandbox Code Playgroud)

javascript tinymce reactjs

2
推荐指数
1
解决办法
6307
查看次数

使用命名函数时如何处理事件删除将阻碍对上下文状态的访问

我正在侦听文件输入中的更改,并且每次需要“监听”某些内容后,都需要删除该侦听器。

问题在于,使用命名函数(无法删除匿名函数上的侦听器)时,我失去了上下文,因此无法访问状态。这是基本版本:

$ImgEl.on('change', () => {
  const reader = new FileReader();
    reader.onloadend = (e) => {
        // Do some stuff with state
        this.state.whatever;
    }
}
Run Code Online (Sandbox Code Playgroud)

通过将此代码与箭头功能配合使用,我可以维护上下文并因此可以访问自己的状态。但是,如果使用命名函数,则可以删除监听器,但会丢失上下文。

还有其他人处理过吗?

javascript jquery

0
推荐指数
1
解决办法
22
查看次数

标签 统计

javascript ×3

reactjs ×2

emoji ×1

jquery ×1

node.js ×1

tinymce ×1