Reactjs 反应自定义事件

在react中，创建自定义事件的最佳方式是什么

作为示例，而不是：

handleKeyPress: function(e) {
    if (e.key === 'Enter') {
        doSomething();
    }
}
...
<input onKeyPress={this.handleKeyPress} />

handleKeyPress:功能（e）{
如果（e.key=='Enter'）{
doSomething（）；
}
}
...

如果能够做到以下几点，那就太好了：

<input onEnter={doSomething} />

这可能吗

---

我可以为

创建自定义包装器，但是如果我想将其添加到

或

？

您可以创建一个基本组件，该组件可以处理所有可能的事件并扩展该组件以创建自定义元素，我要说的是，这种方法更简单，因为在一个类中可以使用所有事件，以防需要添加更多或更改某些行为

class BaseElement扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onEnter=this.onEnter.bind（this）；
this.onSpace=this.onSpace.bind（this）；
this.onKeyPress=this.onKeyPress.bind（this）；
}
欧内斯特（e）{
this.props.onEnter（）
}
空间（e）{
this.props.onSpace（）
}
按键（e）{
开关（电子钥匙）{
“输入”案例：
这个
打破
案例“”：
这个是onSpace（）
打破
违约：
this.props.onChange（）
打破
}
}
};
类CustomText扩展了BaseElement{
render（）{
返回(
)
}
};
类应用程序扩展了React.Component{
render（）{
返回(
console.log（'space'）}
onEnter={e=>console.log（'Enter'）}/>
)
}
}
ReactDOM.render（，document.getElementById（'app'））

---

您可以创建一个基本组件，该组件可以处理所有可能的事件，并扩展该组件以创建自定义元素，我认为这种方法更简单，因为您可以在一个类中使用所有事件，以防需要添加更多或更改某些行为

class BaseElement扩展了React.Component{
建造师（道具）{
超级（道具）；
this.onEnter=this.onEnter.bind（this）；
this.onSpace=this.onSpace.bind（this）；
this.onKeyPress=this.onKeyPress.bind（this）；
}
欧内斯特（e）{
this.props.onEnter（）
}
空间（e）{
this.props.onSpace（）
}
按键（e）{
开关（电子钥匙）{
“输入”案例：
这个
打破
案例“”：
这个是onSpace（）
打破
违约：
this.props.onChange（）
打破
}
}
};
类CustomText扩展了BaseElement{
render（）{
返回(
)
}
};
类应用程序扩展了React.Component{
render（）{
返回(
console.log（'space'）}
onEnter={e=>console.log（'Enter'）}/>
)
}
}
ReactDOM.render（，document.getElementById（'app'））

---

您不能向标准dom元素添加

oneter

或任何其他自定义道具。但是，您可以将它们包装在自定义组件中：

const MyInput = ({onEnter}) => (
    <input onKeyPress={e => e.key === 'Enter' ? onEnter(e) : null } />
);

....

<MyInput onEnter={doSomething} />

constmyinput=（{onEnter}）=>(
e、 key=='Enter'？onEnter（e）：null}/>
);
....

您不能向标准dom元素添加

oneter

或任何其他自定义道具。但是，您可以将它们包装在自定义组件中：

const MyInput = ({onEnter}) => (
    <input onKeyPress={e => e.key === 'Enter' ? onEnter(e) : null } />
);

....

<MyInput onEnter={doSomething} />

constmyinput=（{onEnter}）=>(
e、 key=='Enter'？onEnter（e）：null}/>
);
....

我只需编写一个实用程序包装器，将操作作为参数并返回处理程序函数：

function onEnter(action) {
    return function(e) {
        if (e.key === 'Enter') {
            action();
        }
    }
}

然后导入它并在我想要的元素上使用它

<input onKeyPress={onEnter(doSomething)} />

---

我只需编写一个实用程序包装器，将操作作为参数并返回处理程序函数：

function onEnter(action) {
    return function(e) {
        if (e.key === 'Enter') {
            action();
        }
    }
}

然后导入它并在我想要的元素上使用它

<input onKeyPress={onEnter(doSomething)} />

谢谢，这是个好主意。不幸的是，它确实很长，特别是如果我想对

等做同样的事情，所以我不知道它是否值得。可能无法实现我想要的。谢谢，这是个好主意。不幸的是，它确实很长，特别是如果我想对

等做同样的事情，所以我不知道它是否值得。可能不可能实现我想要的。