React开发：点击提交按钮后如何实现文本域清空

核心逻辑 #

当前采用的是React受控组件模式，Textarea的展示内容完全由App组件传入的Tinput状态单向驱动，无需手动操作DOM，只需在提交流程完成后重置对应绑定状态，文本域就会自动同步为空。

操作步骤 #

1. 修改提交处理方法，在原有提交逻辑执行完成后，追加重置Tinput状态的代码
   参考实现：

   const submitHandle = () => {
     // 保留原有逻辑：将输入内容存入submit状态
     setSubmit(Tinput)
     // 新增：清空绑定文本域的输入状态
     setTinput('')
   }
   

2. 如果已经封装了通用的resetHandle重置方法，可直接在提交逻辑末尾调用该方法，复用已有代码，无需重复编写状态重置逻辑：

   const submitHandle = () => {
     setSubmit(Tinput)
     resetHandle()
   }
   

注意事项 #

• 严格控制代码执行顺序：必须先完成submit状态的赋值，再重置Tinput状态。若顺序颠倒，存入submit的内容会变为空字符串，导致提交内容丢失。
• 禁止在Textarea子组件内直接操作DOM清空输入值：子组件的输入值由父组件传入的受控属性控制，手动修改DOM的行为会在下次React状态更新时被覆盖，无法实现稳定的清空效果。
• 确认组件传值链路畅通：App向Textarea传递的value属性必须绑定Tinput状态，否则修改状态后文本域不会同步更新。

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