按下回车后如何从 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

Answer 2

我认为您可以添加一个 onChange 处理程序。然后您的 Enter 可以随心所欲地使用，例如，提交值。像这样的：

  const [value, setValue] = React.useState<string>()

    const handleChangeText = (event: React.ChangeEvent<HTMLInputElement>) => {
      setValue(event.target.value);
    };


return (
        <TextField
          style={{ margin: 8 }}
          placeholder="Add a task"
          fullWidth
          margin="normal"

          inputProps={{
            onKeyPress: (event) => {
              if (event.key === "Enter") {
                // write your functionality here
                event.preventDefault();
              }
            },
          }}

          onChange={handleChangeText}
        />
)

Answer 3

这也是它的工作代码。

<TextField
                style={{ margin: 8 }}
                placeholder="Add a task"
                fullWidth
                margin="normal"

                inputProps={{
                  onKeyPress: (event) => {
                    if (event.key === "Enter") {
                      // write your functionality here
                      event.preventDefault();
                    }
                  },
                }}

              />

Answer 4

实际上，大多数情况下，如果您希望拥有这种行为，您很可能会创建一个表单。所以将TextField 包装在form 中并实现onSubmit 事件。