web-dev-qa-db-ja.com

React-変更イベントで「Enter」キーの押下を検出

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コンポーネントは再レンダリングして新しい値を表示します。

これはこれまでのところ機能していますが、Enterキーが押された場合、このコンポーネントの動作が異なることを望みます。変更イベントはkeyCodeを公開しないので（少なくとも私は気づいていませんが）、Enterキーが_の場合にhandleChange関数がadd propを呼び出す方法がわかりませんsetText propを呼び出す代わりに押されました。

代わりにonKeyDownハンドラーをtextareaにアタッチして、enter keyCode（13）の検出に使用できましたが、keyCodeを変換するとテキストを正しく設定できませんでしたイベントに文字を添付して現在の値に追加した場合、大文字にするか小文字にするかを判断する方法はありません。

私はかなりここで立ち往生しています。変更イベントでEnterキーを検出する方法は本当にないと思います。また、keyDownイベントには、考えられるすべての入力を処理する方法がありません。おそらく2つを組み合わせることができる方法はありますか？

前もって感謝します！

javascriptreactjsreduxreact-redux
15
Michael Parker

両方のハンドラーを同時に使用できます。

OnKeyDownでは、キーを確認できます。 ENTERが押されている場合は、onChange呼び出しを防ぐためにevent.preventDefault()を呼び出します。そうでない場合は、何もしません。

Javascriptイベントキューには、changeイベントのデフォルトハンドラーが呼び出されるまで、keydownイベントが含まれません。 onKeyDownハンドラーでevent.preventDefault()を呼び出した場合、changeイベントは発生しません。

21
Nick Rassadin