React - 在change事件中检测'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 store，每次用户在文本区域中键入时都会更新。Redux store将新值发送回文本区域组件，文本区域组件重新渲染以显示新值。

虽然到目前为止它可以工作，但是如果按下回车键，我希望这个组件能够有所不同的行为。由于更改事件并没有公开keyCode（至少我不知道），我不知道如何使handleChange函数在按下Enter键时调用add属性而不是调用setText属性。

我尝试过的一件事是将onKeyDown处理程序附加到文本区域，这样我就可以检测到Enter keyCode（13），但这使我无法正确设置文本，因为如果我将事件附加到字符和当前值，那么我无法确定它应该是大写还是小写。

我很困惑。我真的不认为我能在更改事件上检测到回车键，而且keyDown事件没有办法处理所有可能的输入。是否有可能将两者结合起来呢？

提前感谢！

- Michael Parker

---

为什么不同时使用这两个处理程序呢？ 在 onKeyDown 中，您可以检查按键。如果按下的是 ENTER 键，则调用 event.preventDefault() 以防止调用 onChange；否则不做任何操作。 - Nick Rassadin

哦，哇，我没有意识到更改处理程序只会在keydown处理程序事件冒泡后被调用。我以为它们会同时被调用，出于某种原因。感谢您的答案！如果您将该评论发布为答案，我将接受它。 - Michael Parker

已经发布为答案。谢谢。 - Nick Rassadin

Answer 1

你可以同时使用两个事件处理程序。

在onKeyDown事件中，你可以检查按键。如果是ENTER键，则调用event.preventDefault()以防止调用onChange，否则什么也不做。

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

- Nick Rassadin

---

在 key[Press|Up|Down] 中排除 event.preventDefault() 可以触发 change 事件。请注意这一关键点！谢谢！ - Deepak

Answer 2

你可以试试这个。

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

- Mujahidul Islam