Как правильно установить событие onKeyPress для текстового поля Material UI?

Question

Итак, у меня есть компонент TextField из пользовательского интерфейса Материал, например:

<TextField
          id="todo-textarea"
          label="Enter new todo"
          placeholder="ToDo"
          onChange={this.props.toDoOnChange}
          onKeyPress={(ev) => {
            if (ev.ctrlKey && ev.key === 'Enter') {
                this.props.addHandler
            }
          }}
          value={this.props.toDoValue}
          className={classes.textField}
          margin="normal"
          helperText="Press Ctrl+Enter to add new ToDo"
        />

, и я хочу вызвать метод addHandler (который добавляет входное значение в поле дел), когда я нажимаю Ctrl + Enter, но этовещи не работают.В настоящее время я вызываю метод addHandler нажатием кнопки, и он работает хорошо.Похоже, что-то не так с вызовом метода из onKeyPress, потому что у меня есть это сообщение в консоли: ожидался вызов присваивания или функции и вместо этого я увидел выражение no-unused-expressionions

Можете ли вы сказать мне, что здесь не так?

Answer 1

Вы должны вызывать функцию следующим образом

   this.props.addHandler() // with the brackets

, поэтому теперь код выглядит как

      <TextField
      id="todo-textarea"
      label="Enter new todo"
      placeholder="ToDo"
      onChange={this.props.toDoOnChange}
      onKeyPress={(ev) => {
        if (ev.ctrlKey && ev.key === 'Enter') {
            this.props.addHandler() // here was the mistake
        }
      }}
      value={this.props.toDoValue}
      className={classes.textField}
      margin="normal"
      helperText="Press Ctrl+Enter to add new ToDo"
    />