Как получить входные значения textfield, когда нажата клавиша Enter в реагировать JS?

Я хочу передать поле значение, когда пользователь нажимает клавишу ввода с клавиатуры. В onChange события (), я получаю значение текстовое поле, но как получить это значение, когда "ввод" нажата клавиша ?

Код:

import TextField from 'material-ui/TextField';

class CartridgeShell extends Component {

   constructor(props) {
      super(props);
      this.state = {value:''}
      this.handleChange = this.handleChange.bind(this);
   }

   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   render(){
      return(
         <TextField 
             hintText="First Name" 
             floatingLabelText="First Name*"
             value={this.state.value} 
             onChange={this.handleChange} 
             fullWidth={true} />
      )
   }
}
Mayank Shukla
Редактировал вопрос 13-го апреля 2017 в 6:21
Программирование
javascript reactjs material-ui
13-го апреля 2017 в 5:15
20 просмотров
Комментарии к вопросу (2)
Решение

Использование метода OnKeyDown событие, и внутри что проверить код нажатой клавиши пользователем. Ключ код "введите" ключ 13, проверьте код и поставить там логика.

Проверить этот пример:

в 

class CartridgeShell extends React.Component {

   constructor(props) {
      super(props);
      this.state = {value:''}

      this.handleChange = this.handleChange.bind(this);
      this.keyPress = this.keyPress.bind(this);
   } 

   handleChange(e) {
      this.setState({ value: e.target.value });
   }

   keyPress(e){
      if(e.keyCode == 13){
         console.log('value', e.target.value);
         // put the login here
      }
   }

   render(){
      return(
         <input value={this.state.value} onKeyDown={this.keyPress} onChange={this.handleChange} fullWidth={true} />
      )
    }
}

ReactDOM.render(, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id = 'app' />

в

Примечание: заменить элемент ввода материала-уй поле и определить другие свойства также.

Mayank Shukla
Редактировал ответ 13-го апреля 2017 в 6:16
Комментарии (2)

Добавление метода onkeypress будет работать onChange, после чего в текстовом поле.

 {
    console.log(`Pressed keyCode ${ev.key}`);
    if (ev.key === 'Enter') {
      // Do code here
      ev.preventDefault();
    }
  }}
/>
brooksrelyt
Редактировал ответ 7-го февраля 2019 в 6:47
Комментарии (1)

HTMLв

<input id="something" onkeyup="key_up(this)" type="text">

скрипт

function key_up(e){
    var enterKey = 13; //Key Code for Enter Key
    if (e.which == enterKey){
        //Do you work here
    }
}

В следующий раз, пожалуйста, попробуйте обеспечивая некоторый код.

Комментарии (3)