Question

我有一个名为ComponentB的组件，我想要获取关键事件：

var ComponentB = React.createClass({

  render: function() {
    return (
       <div 
           contentEditable 
           onKeyDown={this.handleKeyDown}>{this.props.data}</div>
    );
  },
  handleKeyDown: function(e) {
     console.log("B: " + e.type +"-" + e.which);
  }
});

如果此ComponentB直接位于main / App组件下，我可以获取这些事件。

如果我尝试将此组件嵌入到另一个组件（componentA）中，我将不再接收这些事件（this.props.lines是一个包含3个字符串的数组）：

var ComponentA = React.createClass({
    render: function(){
        return (
          <div
            contentEditable>
            { 
              this.props.lines.map(function(line,i) {
                return <ComponentB key={i} data={line} />  
              })
            }             
          </div>
          );
    }
});

关联的JS BIN显示此行为：如果您尝试编辑组件A部分中的行。不会发出任何事件，但如果您编辑下面的componentB的sinbgle实例，它们将会发出......

在我看来像是react.js中的一个错误，但是想先在这里查看。

Answer 1

正如 @ssorallen 在评论中所说，你不能有嵌套的contentEditable元素，无论是否有反应。

嵌套的contentEditable元素似乎存在问题。从ComponentA中删除contentEditable，它可以按预期工作。

这不起作用的原因之一是因为React不真正支持contentEditable。基本上它设置属性，但它不能合理地呈现到contentEditable中，因为当它试图更新它时...... DOM在没有它知情的情况下发生了变化（这会引发错误）。

相反，您应该将contentEditable元素视为没有子元素的输入元素。而是更新innerHTML（请参阅renderComponentToString和dangerouslySetInnerHTML）并侦听onInput事件以获取更改。有关其工作原理的详细信息，请参阅Stack Overflow: onChange event for contentEditable。

对contentEditable的正确处理已经discussed briefly，但没有找到解决方案。随意提出处理它的好方法。

react.js组件：如果组件在另一个组件内，则无法获取keyDown事件

1 个答案: