首页 文章

反应 - 在更改事件中检测'enter'键按下

提问于
浏览 次
12

我有一个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组件重新呈现以显示新值 .

虽然到目前为止这是有效的，但如果按下回车键，我希望此组件的行为不同 . 由于更改事件不知道），我不知道如果按下回车键而不是调用 setText 道具，如何使 handleChange 函数调用 add 道具 .

我试过的一件事就是将一个 onKeyDown 处理程序附加到textarea，我可以用它来检测输入keyCode（13），但这使我无法正确设置文本，因为如果我将附加到事件的keyCode转换为一个字符并将其附加到当前值，我无法确定它应该是大写还是小写 .

我被困在这里了 . 我真的不认为我有办法在更改事件中检测到输入键，并且keyDown事件无法让我处理所有可能的输入 . 有没有办法可以将两者结合起来？

提前致谢！

javascript reactjs redux react-redux

1 回答

  • 18

    您可以同时使用这两种处理程序 .

    在onKeyDown中，您可以检查密钥 . 如果是ENTER按下调用 event.preventDefault() 以阻止 onChange 呼叫，或者如果不是 - 什么也不做

    在调用 keydown 事件的默认处理程序之前，Javascript事件队列不包含 change 事件 . 如果在 onKeyDown 处理程序中调用 event.preventDefault() ，则不会触发 change 事件 .

    回复于

相关问题