javascript - 子类组件来重写事件处理程序？

Question

我有一个复杂的 React 组件(react-widgets 中的 Combobox)，并且想更改它的一小部分行为 - 我想重写 onKeyDown 事件。如果按下 Enter 键，我想自己处理它，并且组合框不应该看到按键。除此之外，我希望它能成为一个直接替代品。

我知道 React 强烈建议组合而不是继承，但在这种情况下，组合似乎很糟糕 - 如果我制作一个包含 Combobox 的新组件，我必须将每个 prop 转发到组合框:

class MyCombobox extends Component {
    render() {
        return (<Combobox data={this.props.data}
                          value={this.props.value}
                          onChanged={this.props.onChanged}
                          ...
                />);
    }
}

我还尝试只包含一个常规的组合框，并在其容器中设置 onKeyDown，但这并没有覆盖该事件 - 原始的组合框仍然获取该事件，并且我的容器也获取它:

// in MyContainer.render:
return (
    <div className="MyContainer">
        <Combobox data={...} onKeyDown={this.handleKeyDown} />
    </div>
);

这里几乎有效:

class MyCombobox extends Combobox {
  handleKeyDown(event) {
    console.log('MyCombobox.handleKeyDown', event);
    console.log(this);  // this: null!

    if (event.key === 'Enter') {
      event.preventDefault();
      // super.close();  // fails
    }
  }

  render() {
    let result = super.render();
    return React.cloneElement(result, {onKeyDown: this.handleKeyDown});
  }
}

我可以拦截该事件并阻止组合框处理它。然而，this 是null。如果我将 handleKeyPress 改为箭头函数，我可以访问 this (它是 MyCombobox 对象)，但我无法访问任何Combobox 的属性。特别是 super.close() 不起作用(我在函数或类之外得到“'super'”)。

Answer 1

我不确定它是否有帮助，但您可以通过这种方式轻松地将所有 Prop 传递给其他组件(使用 ES6 展开):

class SomeComponent extends React.Component {
    render() {
        return(
            <SomeOtherComponent {...this.props} />
        )
    }
}

我认为它可能会帮助你使用组合来解决你的问题。