reactjs - 按回车键后如何从 Material UI 文本字段中获取值？

Question

我无法使用此代码获取输入值。我尝试使用 onKeyUp、onKeyDown 和 onKeyPress 但这些都不起作用，因为没有返回值。通常使用 onChange 属性获取值，但它会触发每个输入的新字符。

<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
    }
  }}
/>;

Answer 1

使用 e.target.value 你可以获得输入值。添加 e.preventDefault 以避免意外行为:

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

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

Working example