在反應什麼是創建一個自定義事件的最佳方式？反應自定義事件
作爲一個例子，而不是：
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>
謝謝，這是個好主意。不幸的是，它最終會長得特別長，特別是如果我想對'