在反应什么是创建一个自定义事件的最佳方式？反应自定义事件
作为一个例子，而不是：
handleKeyPress: function(e) {
if (e.key === 'Enter') {
doSomething();
}
}
...
<input onKeyPress={this.handleKeyPress} />
这将是很好做能够只是做：
<input onEnter={doSomething} />
这可能吗？
我可以为<input>创建自定义包装，但如果我想将其添加到<select>或<textarea>怎么办？
据我所知，这是不可能做的正是我娃nting。
一些可能的备选方案：
1 - 使用包装部件（信用@ m1kael）
const Input = ({onEnter}) => {
function handleKeyPress() {
if (e.key === 'Enter') {
onEnter();
}
}
return (
<input onKeyPress={handleKeyPress} />
);
};
const Example =() => {
function doSomething() {
console.log('Enter')
}
return (
<Input onEnter={doSomething} />
);
}
2 - 使用效用函数（信用@迈克尔Peyper）
function onEnter(action) {
return function(e) {
if (e.key === 'Enter') {
action();
}
}
}
const Example =() => {
function doSomething() {
console.log('Enter')
}
return (
<input onKeyPress={onEnter(doSomething)} />
);
}
3 - 扩展React.Component类（credit @damianfabian）
class customComponent extends React.Component {
onEnter(action) {
return function(e) {
if (e.key === 'Enter') {
action();
}
}
}
}
class Example extends customComponent {
doSomething() {
console.log('Enter')
}
render() {
return (
<input onKeyPress={this.onEnter(this.doSomething)} />
);
}
}
您可以创建一个基本组件，可以处理所有可能发生的事件，并扩展了组件来创建自定义元素，我会说是比较容易这种方式，因为你将有你的所有的一类事件的情况下，你需要添加更多或改变一些行为。
class BaseElement extends React.Component {
constructor(props){
super(props);
this.onEnter = this.onEnter.bind(this);
this.onSpace = this.onSpace.bind(this);
this.onKeyPress = this.onKeyPress.bind(this);
}
onEnter (e) {
this.props.onEnter()
}
onSpace (e) {
this.props.onSpace()
}
onKeyPress (e) {
switch(e.key){
case 'Enter':
this.onEnter()
break;
case ' ':
this.onSpace()
break;
default:
this.props.onChange()
break;
}
}
};
class CustomText extends BaseElement {
render() {
return (
<input type='text' onKeyPress={this.onKeyPress} />
)
}
};
class App extends React.Component {
render() {
return (
<CustomText onSpace={e => console.log('space')}
onEnter={e => console.log('Enter')} />
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
</head>
<body>
<div id='app'></div>
</body>
</html>
谢谢，这是个好主意。不幸的是，它最终会长得特别长，特别是如果我想对'