如何为MUI TextField配置onChange与表单onSubmit并阻止页面重载

1. 表单提交触发问题 #

原代码中<form onSubmit={handleSubmit()}>的写法错误，会导致组件渲染时立即执行handleSubmit，而非表单提交时触发。需改为传递函数引用：

<form onSubmit={handleSubmit}>

若需额外传参，也可使用箭头函数：

<form onSubmit={(e) => handleSubmit(e)}>

2. 阻止表单提交时页面重载 #

在handleSubmit函数中接收表单提交事件对象，调用event.preventDefault()即可阻止默认的页面重载行为：

const handleSubmit = (event) => {
  // 阻止默认提交行为
  event.preventDefault();
  if (user_input === 'help') {
    console.log('help');
  } else {
    console.log('no help');
  }
}

3. 优化状态更新逻辑 #

原handleChange函数的参数命名可更清晰（当前参数实际是输入框的value，而非event对象），优化后：

const handleChange = (inputValue) => {
  set_user_input(inputValue);
}

对应的TextField的onChange保持不变即可：

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

完整修正后的代码 #

const handleChange = (inputValue) => {
  set_user_input(inputValue);
}

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

// JSX部分
<form onSubmit={handleSubmit}>
  <label>
    guest@website.com:: {'~ >>'}
  </label>
  <TextField
    id="outlined-name"
    value={user_input}
    onChange={e => handleChange(e.target.value)}
  />
</form>

内容的提问来源于stack exchange，提问作者stopbanningmelmao123