React应用中不使用表单时，如何实现按钮点击后清空TextBox？

核心实现逻辑 #

现有代码结构本身就符合不使用表单元素的约束——没有用<form>包裹交互组件，只需要依托React的单向数据流特性，通过重置绑定的状态值即可完成清空，完全不需要手动操作DOM节点。

具体调整步骤 #

• 补全受控组件的绑定链路：给文本框加上value={name}属性，让输入框的显示值和存储的状态name保持完全同步，这是React受控组件的标准写法
• 在handleSubmit回调中，将存储输入值的状态重置为空字符串，视图会自动响应状态变化完成清空操作

调整后的完整可运行代码 #

import { useState } from 'react'

function TextClearDemo() {
  const [name, setName] = useState('') 

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

  const handleSubmit = () => {
    // 直接重置状态即可触发文本框清空
    setName('')
  }

  return (
    <>
      {/* 补上value属性完成受控组件绑定 */}
      <input type="text" value={name} onChange={handleChange} />
      <button onClick={handleSubmit}>清空输入</button>
    </>
  )
}

常见踩坑提醒 #

• 如果没有给input绑定value={name}，哪怕在handleSubmit中写了setName('')，已经输入的内容也不会消失：非受控输入框的内容是由浏览器原生DOM维护的，和React状态完全脱钩，必须补上value绑定才能实现状态到视图的联动
• 这种实现完全不依赖DOM节点操作，也不会触发表单默认的页面刷新行为，完全符合需求约束

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