在ag-grid-react中，编辑单元格无效时如何禁用更新按钮？

核心思路 #

通过在自定义单元格编辑器中维护验证状态，将状态绑定到更新按钮的disabled属性上，确保只有验证通过时才能触发保存操作。

具体实现步骤 #

1. 在编辑器组件中添加状态变量
   在自定义编辑器（如AsyncValidationEditor.jsx）中，新增验证相关状态：

   import { useState, useEffect } from 'react';
   
   const AsyncValidationEditor = ({ value, onSave, onCancel }) => {
     const [inputValue, setInputValue] = useState(value);
     const [isValid, setIsValid] = useState(true);
     const [errorMsg, setErrorMsg] = useState('');
     // ...
   };
   

2. 编写验证逻辑（同步/异步）

   • 同步验证（比如检查格式、非空）：

     const handleInputChange = (e) => {
       const val = e.target.value;
       setInputValue(val);
       // 示例：验证非空且为数字
       const valid = val.trim() !== '' && /^\d+$/.test(val);
       setIsValid(valid);
       setErrorMsg(valid ? '' : '请输入有效的数字');
     };
     

   • 异步验证（比如调用接口校验）：

     const validateValue = async (val) => {
       try {
         // 替换为实际验证接口逻辑
         const res = await fetch(`/api/check-value?val=${val}`);
         const data = await res.json();
         setIsValid(data.isValid);
         setErrorMsg(data.msg || '');
       } catch (err) {
         setIsValid(false);
         setErrorMsg('验证失败，请稍后重试');
       }
     };
     
     // 输入防抖触发验证
     useEffect(() => {
       if (inputValue.trim()) {
         const timer = setTimeout(() => validateValue(inputValue), 600);
         return () => clearTimeout(timer);
       } else {
         setIsValid(false);
         setErrorMsg('输入不能为空');
       }
     }, [inputValue]);
     

3. 绑定按钮禁用状态
   在编辑器的提交按钮上设置disabled属性，并添加样式增强视觉提示：

   <div className="editor-container">
     <input 
       type="text" 
       value={inputValue} 
       onChange={handleInputChange}
       className={!isValid ? 'input-error' : ''}
     />
     {errorMsg && <span className="error-text">{errorMsg}</span>}
     <div className="editor-buttons">
       <button onClick={onCancel}>取消</button>
       <button 
         onClick={() => isValid && onSave(inputValue)}
         disabled={!isValid}
         className={!isValid ? 'btn-disabled' : ''}
       >
         更新
       </button>
     </div>
   </div>
   

   对应的CSS样式（App.css）：

   .input-error {
     border: 1px solid #ff4444;
   }
   .error-text {
     color: #ff4444;
     font-size: 12px;
     margin-top: 4px;
     display: block;
   }
   .btn-disabled {
     background-color: #cccccc;
     cursor: not-allowed;
     color: #666666;
     border: none;
   }
   

4. 确保保存逻辑安全触发
   在保存回调中再次校验状态，避免意外提交：

   const handleSave = () => {
     if (!isValid) return;
     onSave(inputValue);
   };
   

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