如何在onSubmit事件而非onChange事件后修改input值？

嘿，我碰到过好多次这个问题啦！核心原因其实很简单——表单提交默认会触发页面刷新，你刚改完input值，页面一刷新就又回到初始状态了，所以看起来像是改不了。给你两个关键步骤就能搞定：

• 首先阻止表单的默认提交行为：在你的onSubmit事件处理函数里，第一时间调用event.preventDefault()，这样页面就不会刷新，你的修改操作才能保留下来。
• 然后再去修改input的值：不管是直接操作DOM节点的value属性，还是用React这类框架的状态管理来更新，都能正常生效了。

给你举个原生JS的实际例子：

<form id="submitForm">
  <input type="text" id="demoInput" value="初始内容">
  <button type="submit">提交</button>
</form>

<script>
const form = document.getElementById('submitForm');
const input = document.getElementById('demoInput');

form.addEventListener('submit', (e) => {
  // 必须先阻止默认刷新
  e.preventDefault();
  // 现在可以正常修改input值了
  input.value = '提交完成后的新内容';
});
</script>

如果是用React开发的话，就要通过状态来控制input值，示例代码如下：

import { useState } from 'react';

function SubmitForm() {
  const [inputVal, setInputVal] = useState('初始内容');

  const handleSubmit = (e) => {
    e.preventDefault();
    // 更新状态，input会自动同步新值
    setInputVal('提交完成后的新内容');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        value={inputVal} 
        onChange={(e) => setInputVal(e.target.value)} 
      />
      <button type="submit">提交</button>
    </form>
  );
}

只要记住先阻止默认刷新行为，修改input值的操作就能正常生效啦！

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