Reactjs 按enter键后如何从物料UI文本字段中获取值？

I无法使用此代码获取输入值。我尝试了使用

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

{
如果（e.key==“输入”）{
console.log（“按下回车键”）；
//在这里写下你的功能
}
}}
/>;

这也是适用于此的工作代码

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

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

              />

{
如果（event.key==“输入”）{
//在这里写下你的功能
event.preventDefault（）；
}
},
}}
/>

我认为您可以添加一个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}
        />
)

const[value，setValue]=React.useState（）
常量handleChangeText=（事件：React.ChangeEvent）=>{
设置值（event.target.value）；
};
返回(
{
如果（event.key==“输入”）{
//在这里写下你的功能
event.preventDefault（）；
}
},
}}
onChange={handleChangeText}
/>
)

使用

e.target.value

可以获得输入值。添加

e.preventDefault

以避免意外行为：

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

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

const onKeyPress=（e）=>{
如果（e.key==“输入”）{
console.log（'Input value'，例如target.value）；
e、 预防默认值（）；
}
}

---

实际上，大多数情况下，如果您希望有这种行为，您很可能正在创建表单。因此，将

文本字段

包装成

表单

并实现

onSubmit

事件。

onChange在每次输入字符时都会触发。我只想在按下enter按钮后使用触发器函数。在放置onKeyPress={onKeyPress}属性后，它不会完全触发。因为它不是material UI textfield API的属性。我尝试了这个答案，但在获取值时它不起作用。@SupunSandaruwan您检查了工作示例了吗？根据组件实现，它接收其他道具，而onKeyPress是一个合成事件，请参见查看其他人是如何连接到TextFieldRoot的。非常感谢您的解释和回答。我有了新东西。