我有一个React组件,它或多或少是一个用户可以键入的简单文本区域。以下是目前代码的样子:
import React from 'react';
import {connect} from 'react-redux';
function handleChange(event) {
const {setText} = this.props;
//is there some way I can detect [ENTER] here and call this.props.add instead?
setText(event.target.value);
}
class TextArea extends React.Component {
constructor(props) {
super(props);
}
render() {
const {value} = this.props;
return (
<div className="list-item">
<textarea
className="form-control"
value={value}
onChange={handleChange.bind(this)}
/>
</div>
);
}
}
function mapStateToProps(state) {
return {
value: state.value
}
}
function mapDispatchToProps(dispatch) {
return {
setText(text) {
const action = {
type: 'set-text',
text: text
};
dispatch(action);
},
add() {
const action = {
type: 'add'
};
dispatch(action);
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(TextArea)
此组件连接到redux存储,每次用户在文本区域中键入内容时都会更新该存储。 redux存储将新值发送回textarea组件,textarea组件重新呈现以显示新值。
虽然到目前为止这是有效的,但如果按下回车键,我希望此组件的行为不同。由于更改事件没有公开keyCode(至少不是我意识到的),我不知道如果输入handleChange
函数调用add
prop怎么做按下键而不是调用setText
道具。
我试过的一件事就是将一个onKeyDown
处理程序附加到textarea,我可以用它来检测输入keyCode(13),但这使我无法正确设置文本,因为如果我转换了keyCode将事件附加到一个字符并将其附加到当前值,我将无法确定它是大写还是小写。
我非常被困在这里。我真的不认为我有办法在更改事件中检测到输入键,而keyDown事件并没有办法让我处理所有可能的输入。有没有办法可以将两者结合起来?
提前致谢!
答案 0 :(得分:20)
您可以同时使用这两种处理程序。
在onKeyDown中,您可以检查密钥。如果按ENTER键,请拨打event.preventDefault()
以阻止onChange
来电,或者如果不是 - 则不执行任何操作
在调用change
事件的默认处理程序之前,Javascript事件队列不包含keydown
事件。如果您在event.preventDefault()
处理程序中致电onKeyDown
,则不会触发change
事件。