イベントハンドラをオーバーライドするサブクラスのコンポーネントですか？

Question

私は複雑なReactコンポーネント（反応ウィジェットのCombobox）を持っており、その動作の一部を変更したいと思います - onKeyDownイベントをオーバーライドしたいと思います。 Enterを押すと、私はそれを自分で処理したいのですが、コンボボックスはキーを押さないでください。それとは別に、私はドロップインの代わりになることを望んでいます。私は強く反応知っ

は相続上の組成を推奨していますが、この場合には作曲が悪いようだ - 私はコンボボックスを含む新しいコンポーネントを作成する場合、私は、コンボボックスに、すべての小道具を転送する必要があると思います：

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

このここ

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

を：オリジナルのコンボボックスは、まだイベントを取得し、私のコンテナは、それを取得し、あまりにも - 私も普通のコンボボックスを含めて、その容器にonKeyDownメソッド設定しようとしたが、それは、イベントを上書きしませんでしたほぼ点の作品：

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()は機能しません（「関数またはクラス以外の「スーパー」を取得します）。

Answer 1

私はそれができますかどうかわからないんだけど、あなたは簡単に（アンラップES6を使用して）他のコンポーネントにこの方法をすべての小道具を渡すことができます。

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

私はそれを使ってあなたの問題を解決するためにあなたを助けるかもしれないと思います組成。

Answer 2

この種の作品は、リアクションウェイ（作曲、小道を通じて子どもに情報を渡すだけのこと）をしているようです。

カスタムテキストを入力してEnterキーを押すと、テキストを破棄してリストの要素を選択する代わりに、そのテキストが取り込まれてメニューが閉じられます。

まだネイティブコンボボックスのように100％動作しないので、私は今は諦めて別のコンポーネントを試しています:-)。しかし、おそらく、これは、コンポーネントを「サブクラス化」しようとする他の人にとって便利な回避策です。

これを簡略化できますが、valueの手動処理が必要であるかどうかはわかりません。

class MyCombobox extends Component { 
    handleKeyDown = (event) => { 
    if (event.key === 'Enter') { 
     event.preventDefault(); 
     this.setState({open: false, value: event.target.value}); 
    } 
    } 

    constructor() { 
    super(); 
    this.state = {open: false, value: null}; 
    } 

    render() { 
    return (
     <Combobox value={this.state.value} open={this.state.open} 
     onToggle={(isOpen)=>this.setState({open:isOpen})} 
     onChange={(newValue)=>this.setState({value:newValue})} 
     onKeyDown={this.handleKeyDown} {...this.props} /> 
    ); 
    } 
}