Вызов функции внутри другой функции в React

Question

Я делаю форму входа в систему, которая работает, я хочу сделать так, чтобы нажатие клавиши ввода сделало то же самое, что нажатие кнопки отправки. Вот мой код:

handleSubmit(e) {
      const TOKEN = 'Bearer ' + getToken();
        e.preventDefault();

        const datapost = {
          username : this.state.username,
          password : this.state.password

        }
        let axiosConfig = {
          headers: {
            'Content-Type': 'application/json;charset=UTF-8',
            "Access-Control-Allow-Origin": "*",
            'Authorization': TOKEN
        }
        };
handleKeyDown(e){
        if (e.key === 'Enter') {
        console.log("working");
        this.handleSubmit(); 
        }
      } 

<TextField id="filled-basic" onKeyDown={this.handleKeyDown} label="Contrasenya" type="password" variant="filled" onChange={this.handleChange} name="password" value={this.state.password}/>

  <Button variant="contained" type="submit" onKeyDown={this.handleKeyDown} color="primary" size="small" onClick={this.handleSubmit} >

Answer 1

Правильный способ сделать это - вместо использования события keyDown использовать форму. Если вы окружите свой ввод и кнопку отправки формой, нажатие клавиши Enter автоматически будет считаться отправкой. Как то так:

<form onSubmit={this.handleSubmit}>
  <input type="text />
  <button type="submit">Submit</button>
</form>

Answer 2

Не уверен, в чем ваша проблема, но это может помочь, если вы получаете сообщение об ошибке

handleKeyDown(e){
    if (e.key === 'Enter') {
        console.log("working");
        this.handleSubmit(e); // <-- pass e next
    }
} 

Я мог бы помочь вам больше, если вы сообщите нам больше

Answer 3

просто измените e.preventDefault(); на e && e.preventDefault();

Или, если вы можете использовать новейшие языковые функции, вы можете использовать опциональную цепочку

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

e?.preventDefault();