React.js：多输入框共用单个保存栏的实现问题

问题核心 #

你当前的代码会在每个输入框内容变化时，不管showBanner当前状态如何，都执行状态更新操作，导致不必要的组件重渲染。需要添加状态判断，仅当目标状态与当前状态不一致时才触发更新。

基础解决方案 #

修改事件处理函数，跳过无效的状态更新：

修改后的代码 #

const [showBanner, setShowBanner] = useState(false);

const handelBanner = (e) => {
    const hasContent = e.target.value.length > 0;
    // 仅当需要的状态和当前状态不同时，才执行更新
    if (hasContent !== showBanner) {
        setShowBanner(hasContent);
    }
};

return (
  <>
    {/* 多个输入框绑定同一个事件处理函数 */}
    <input onChange={handelBanner} />
    <input onChange={handelBanner} />
    
    {showBanner ? <div>save bar</div> : null}
  </>
);

关键逻辑 #

• 先判断当前输入框是否有内容：const hasContent = e.target.value.length > 0
• 对比hasContent和当前showBanner状态，只有两者不同时才调用setShowBanner，避免重复触发状态更新

进阶全局判断方案 #

如果你的需求是只要任意一个输入框有内容就显示Savebar，基础方案会存在漏洞（比如清空一个有内容的输入框，但其他输入框还有内容时，Savebar会被错误隐藏）。这时需要跟踪所有输入框的内容，统一判断：

代码实现 #

// 用一个状态存储所有输入框内容
const [formData, setFormData] = useState({
  input1: '',
  input2: '',
  input3: ''
});

// 派生状态：判断是否有任意输入框有内容
const showBanner = Object.values(formData).some(val => val.length > 0);

const handleInputChange = (e) => {
  const { name, value } = e.target;
  setFormData(prev => ({ ...prev, [name]: value }));
};

return (
  <>
    <input name="input1" value={formData.input1} onChange={handleInputChange} />
    <input name="input2" value={formData.input2} onChange={handleInputChange} />
    <input name="input3" value={formData.input3} onChange={handleInputChange} />

    {showBanner ? <div>save bar</div> : null}
  </>
);

方案优势 #

• 基于所有输入框的内容统一判断Savebar的显示状态，逻辑更准确
• 避免单个输入框变化导致的错误状态切换
• showBanner是派生状态，无需单独维护，避免状态不同步问题

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