reactjs - Hvordan får man værdien fra en Material UI tekstfelt efter at have trykket på enter?

Jeg kan ikke få inputværdien med denne kode. Jeg prøvede med onKeyUp, onKeyDown og onKeyPress, men de virkede ikke, fordi de ikke returnerer værdien. Normalt får man værdien med onChange-egenskaben, men den udløses ved hvert nye indtastede tegn.

<TextField
  style={{ margin: 8 }}
  placeholder="Add a task"
  fullWidth
  margin="normal"
  onKeyPress={(e) => {
    if (e.key === "Enter") {
      console.log("Enter key pressed");
      // write your functionality here
    }
  }}
/>;

Svar #1

Med e.target.value kan du få inputværdien. Tilføj e.preventDefault for at undgå en uventet adfærd:

  const onKeyPress = (e) => {
    if (e.key === "Enter") {
      console.log('Input value', e.target.value);
      e.preventDefault();
    }
  }

  <TextField
     ...
     onKeyPress={onKeyPress}/>

Arbejds eksempel

Svar #2

Faktisk, det meste af tiden, hvis du ønsker at have denne adfærd, er det mest sandsynligt, at du opretter en formular. Så pak TextField ind i en form og implementer onSubmit-begivenheden.

Relaterede artikler