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组件重新渲染显示新值。

虽然到目前为止一切正常，但我希望此组件在按下回车键时表现不同。由于 change 事件不公开 keyCode（至少我不知道），我不知道如何让 handleChange 函数在按下回车键时调用 add 道具调用 setText prop.

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

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

提前致谢！

Answer 1

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

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

在调用 keydown 事件的默认处理程序之前，

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

Answer 2

你可以试试这个。

          onChange={(evt: any) => {               
          }}
          onKeyDown={(evt: any) => {
            const keyCode = evt.keyCode;
            if (keyCode === 8) evt.preventDefault();
          }}

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

React - detect 'enter' key press in change event

javascript

reactjs

redux

react-redux