如何让 MUI TextField 具有 onChange 和 onSubmit 事件？

Question

我正在使用反应和 mui。 我有这样的表格：

const handleChange = (event) => {
        set_user_input(event)
    }

    const handleSubmit = () => {
        if (user_input == 'help'){
            console.log('help')
        }
        else{
            console.log('no help')
        }
    }




<form onSubmit={handleSubmit()}>
                    <label>
                        guest@website.com:: {'~ >>'}
                    </label>

                    <TextField
                        id="outlined-name"
                        value={user_input}
                        onChange={e => handleChange(e.target.value)}
                    />
                </form>

这个想法是用 onChange 方法更新变量的 state，并在提交表单时触发 handleSubmit 方法。

顺便说一句，如何阻止表单在提交时重新加载页面？ 谢谢！

Answer 1

可能还有其他问题，但仅对于发布的代码， handleSubmit似乎应该调用e.preventDefault()以防止页面重新加载：

const handleChange = (e) => {
  set_user_input(e.target.value);
};

const handleSubmit = (e) => {
  e.preventDefault();
  if (user_input === "help") {
    console.log("help");
  } else {
    console.log("no help");
  }
};

在 output handleSubmit可以分配给onSubmit但不能现场运行：

<form onSubmit={handleSubmit}>
  <label>guest@website.com:: {"~ >>"}</label>
  <TextField id="outlined-name" value={user_input} onChange={handleChange} />
</form>