reactjs - 如何在 react 中附加自定义事件处理程序？

Question

我有一个在 React 中创建的 SelectBox 组件，我希望其他开发人员在他们的代码中重用它。 SelectBox 每次重复使用时都会有相同的选项，但我希望开发人员在 onChange 事件上有自己的自定义事件处理程序。

我的代码如下所示:

class SelectBox extends React.Component {
   updateOutput() {
   }

   render() {
      return (
         <div className="select-wrap">
            <select onChange={this.updateOutput}>
               <option value="one">ONE</option>
               <option value="two">TWO</option>
               <option value="three">THREE</option>
            </select>
         </div>
      );
   }
}

ReactDOM.render( <SelectBox />, document.querySelector( '#main' ) );

我希望它有点像抽象类的概念，其中类的实现取决于扩展它的人。

以上，我希望开发人员使用<SelectBox />并实现自己的updateOutput()方法，如何做到这一点？

Answer 1

import PropTypes from 'prop-types';

 class SelectBox extends React.Component {

       render() {
          return (
             <div className="select-wrap">
                <select onChange={this.props.updateOutput}>
                   <option value="one">ONE</option>
                   <option value="two">TWO</option>
                   <option value="three">THREE</option>
                </select>
             </div>
          );
       }
    }
SelectBox .propTypes = {
  updateOutput: PropTypes.func
};

    ReactDOM.render( <SelectBox updateOutput={someFunc} />, document.querySelector( '#main' ) );