React - обнаружение нажатия клавиши ввода в событии изменения

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 отправляет новое значение обратно в компонент textarea, а компонент textarea повторно отображает для отображения нового значения.

Пока это работает, я хотел бы, чтобы этот компонент работал по-другому, если нажата клавиша ввода. Поскольку событие изменения не раскрывает keyCode (по крайней мере, не то, что я знаю), я понятия не имею, как сделать функцию handleChange вызовом add, если нажать клавишу ввода вместо вызова setText.

Одна вещь, которую я пробовал, - это привязать обработчик onKeyDown к текстовому полю, который я мог бы использовать для обнаружения ключа keyCode (13), но это не позволило мне правильно установить текст, потому что, если бы я преобразовал присоединенный keyCode к событию персонажу и приложил его к текущему значению, мне не удастся определить, должен ли он быть верхним или нижним регистром.

Я довольно застрял здесь. Я действительно не думаю, что есть способ обнаружить ключ ввода в событии изменения, и событие keyDown не имеет возможности обрабатывать все возможные входы. Есть ли способ, которым я мог бы объединить эти два?

Заранее благодарен!

Answer 1

Вы можете использовать оба обработчика одновременно.

В onKeyDown вы можете проверить ключ. Если ENTER отжатого вызова event.preventDefault() для предотвращения onChange вызова, или если это не так - ничего не делать

очереди Javascript не содержит change события до обработчика по умолчанию для keydown события называется. Если вы звоните event.preventDefault() в onKeyDown, то обработчик change будет уволен.