javascript - React - 在更改事件中检测到 'enter' 按键

Question

我有一个 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 store 将新值发送回 textarea 组件，textarea 组件重新渲染以显示新值。

虽然到目前为止这一切正常，但我希望这个组件在按下回车键时表现不同。由于更改事件不公开 keyCode(至少我不知道)，我不知道如何使 handleChange 函数调用 add Prop ，如果按下回车键而不是调用 setText 属性。

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

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

提前致谢!

Answer 1

您可以同时使用这两个处理程序。

在 onKeyDown 你可以检查键。如果按下 ENTER 键调用 event.preventDefault() 来阻止 onChange 调用，如果没有按下 - 什么都不做

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