React项目提交后清空预设名称输入框的实现方法

你的输入框是受控组件，值完全由presetName这个状态变量控制，所以提交表单后只需将该状态重置为空字符串即可清空输入框。

具体实现步骤： #

• 在表单提交处理函数中，完成提交逻辑后调用setPresetName('')
• 如果需要同时清除错误提示，可一并重置doesContainError状态

完整示例代码： #

import { useState } from 'react';

// 组件内定义状态
const [presetName, setPresetName] = useState('');
const [doesContainError, setDoesContainError] = useState(false);

// 表单提交处理函数
const handleSubmit = (e) => {
  e.preventDefault();
  
  // 添加表单验证、数据提交逻辑
  if (!presetName.trim()) {
    setDoesContainError(true);
    return;
  }
  
  // 模拟数据处理或API请求
  console.log('提交预设名称:', presetName);
  
  // 提交完成后清空输入框及错误状态
  setPresetName('');
  setDoesContainError(false);
};

// 组件渲染部分
return (
  <form onSubmit={handleSubmit}>
    <PresetModalInputWrapper>
      <PresetModalInput
        placeholder={'Preset Name'}
        value={presetName}
        onChange={(event) => setPresetName(event.target.value)}
      />
      {doesContainError ? (
        <PresetErrorMessage>{messagePresetWithSuchNameExists}</PresetErrorMessage>
      ) : null}
    </PresetModalInputWrapper>
    <button type="submit">提交预设</button>
  </form>
);

关键点说明： #

• 受控组件的核心是状态驱动视图，输入框的值始终与presetName保持同步
• 清空操作本质就是修改状态，React会自动重新渲染输入框并显示空值

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