我有一个在 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()
方法,如何做到这一点?
最佳答案
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' ) );
关于reactjs - 如何在 react 中附加自定义事件处理程序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49249251/