反应 - 在更改事件中检测“输入"键 [英] React - detect 'enter' key press in change event

问题描述

我有一个 React 组件，它或多或少是一个用户可以输入的简单文本区域.到目前为止，代码如下所示:

从'react'导入React；从'react-redux'导入{connect}；函数handleChange(事件){const {setText} = this.props;//有什么方法可以在这里检测到 [ENTER] 并调用 this.props.add 吗?setText(event.target.value);}类 TextArea 扩展了 React.Component {构造函数(道具){超级(道具)；}使成为() {const {value} = this.props;返回 (<div className="list-item"><文本区域类名=表单控件"价值={价值}onChange={handleChange.bind(this)}/>

);}}函数 mapStateToProps(state) {返回 {值:状态.值}}函数 mapDispatchToProps(dispatch) {返回 {设置文本(文本){常量动作 = {类型:'设置文本'，文字:文字};调度(动作)；},添加() {常量动作 = {类型:'添加'};调度(动作)；}}}导出默认连接(mapStateToProps，mapDispatchToProps)(TextArea)

这个组件连接到一个 redux 存储，每次用户在文本区域输入内容时都会更新.redux 存储将新值发送回 textarea 组件，textarea 组件重新渲染以显示新值.

虽然到目前为止这一切正常，但如果按下 Enter 键，我希望这个组件的行为有所不同.由于更改事件不公开 keyCode(至少我不知道)，我不知道如何使 handleChange 函数调用 add 道具，如果按下回车键而不是调用 setText 道具.

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

我被困在这里了.我真的不认为有一种方法可以让我检测更改事件上的 Enter 键，并且 keyDown 事件没有办法让我处理所有可能的输入.有没有办法把两者结合起来?

提前致谢！

解决方案

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

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

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

I have a React component that is, more or less, a simple textarea where a user can type into. Here is what the code looks like so far:

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)

This component is connected to a redux store, which is updated every time the user types something into the text area. The redux store sends the new value back to the textarea component, and the textarea component re-renders to display the new value.

While this is working so far, I would like this component to behave differently if the enter key is pressed. Since a change event doesn't expose a keyCode (at least not that I'm aware), I have no idea how to make the handleChange function call the add prop if an enter key is pressed instead of calling the setText prop.

One thing I tried was to attach an onKeyDown handler to the textarea instead, which I could use to detect the enter keyCode (13), but this made me unable to set the text correctly, because if I converted the keyCode attached to the event to a character and appended it to the current value, there would be no way for me to determine whether it should be upper or lower case.

I'm pretty stuck here. I really don't think there's a way for me to detect the enter key on a change event, and a keyDown event doesn't have a way for me to handle all possible inputs. Is there a way I could possibly combine the two?

Thanks in advance!

解决方案

You can use both of handlers same time.

In onKeyDown you can check key. If it is ENTER pressed call event.preventDefault() to prevent onChange call, or if it is not - do nothing

Javascript event queue doesn't contain change event until default handler for keydown event is called. If you call event.preventDefault() in onKeyDown handler no change event will be fired.

这篇关于反应 - 在更改事件中检测“输入"键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！