Question

我是一个React新手，我试图找出如何有条件地为元素添加函数。在jquery中，我可能有以下代码。

<div class="editor-container">
    <textarea id='editor'></textarea>
</div>

$(function(){
    $(document).on("keyup", "#editor", function () {
        // do something on editor keyup
    });
});

但是稍后我可以使用此代码删除另一个js文件

$(function(){
    $(document).on("keyup", "#editor", function () {
        // do something additionally on editor keyup
    });
});

我无法弄清楚如何在React中执行此操作。

import React from 'react';    

export default class Editor extends React.Component {

  handleTextChange(e) {
    // do stuff with content
  }  

  render() {
    return (
      <div className="editor-container">
        <textarea 
           onChange={this.handleTextChange}>
        </textarea>
      </div>
    );
  }
}

据我所知，无论我想要发生什么onChange，我都需要提前申报。如何在事后添加某种行为？

更新

我想我并没有很好地解释自己，所以让我对我想做的事做一个更一般的解释。

我的应用程序将有一个Editor组件，但编辑器可能会有很多不同的功能，这些功能是从keyup / keydown / change事件触发的。例如，我想拥有关键声音 - 当用户输入时，他们会收到打字机的声音。但是，我不想嵌入所有代码来加载和播放Editor组件中的声音文件。我想把所有内容分成另一个文件。

我猜这个简单的答案是我会把它放在KeyDown内的一个看不见的Editor组件中，如下所示：

<div class="editor-container">
    <textarea id='editor'></textarea>
    <KeySounds />
</div>

但是我不确定如何将这些其他组件绑定到keydown事件中 - 也许我应该使用某种事件发射器？

Answer 1

如果您正在构建复杂的应用程序（例如编辑器），我建议您查看管理应用程序状态的方法。有很多方法可以做到（内部状态，Flux，Redux ......）。

在您的特定示例中，我将考虑使用Redux来分派事件。因此，您的onKeyUp函数应该只触发一个动作，该动作将调度一个事件。然后，您可以使用与jQuery相同的方式添加事件监听器。

Answer 2

据我所知，无论我想改变什么，我都需要提前申报。如何在事后添加某种行为？

你可以提前声明它，如果它不存在，将是未定义的，所以如果它来自一个上层组件，你可以改变那个值，它会触发一个rerender，如果在某个时刻存在，你将会调用无论是什么onChange

动态添加反应组件的行为

更新

2 个答案: