React父子组件表单：无输入时保留原有值的实现方法

在你的React父子组件场景中，当前存在输入为空时会覆盖原有数据的问题，以下是几种直接有效的解决方式：

方案一：父组件更新时判断空值，保留原有字段值 #

修改父组件的editData函数，在更新对象时仅用非空的新值替换原有值，空值（包括全空格）则保留原有数据：

const editData = (id,ehe,ela) =>{
  setmyArray(myArray.map(obj =>{
    if(obj.id === id){
      // 用trim()处理全空格的情况，确保真正的空输入才保留原值
      return {
        ...obj,
        todoname: ehe.trim() || obj.todoname,
        todotoday: ela.trim() || obj.todotoday
      }
    }else{
      return obj;
    }  
  }));
}

这种方式不需要修改子组件，直接在父组件的更新逻辑里做判断，简单高效。

方案二：子组件初始化时加载原有数据，用户无修改则提交原值 #

让子组件接收当前的待办数据，将输入框初始值设为原有内容，这样用户不修改的话，提交的就是原有值，不会出现空值覆盖的情况：

1. 修改父组件传递参数 #

在渲染SetEdit时，传入当前的待办对象：

<SetEdit 
  className="editComp" 
  currentTodo={obj} 
  onSubmit={(input1,input2) => editData(obj.id,input1,input2)}
/>

2. 修改子组件初始化逻辑 #

将输入框的初始值设为传入的原有数据：

const SetEdit = (props) => {
    // 用传入的currentTodo初始化输入框值
    const [fh,setfh] = useState(props.currentTodo.todoname);
    const [El,setEl] = useState(props.currentTodo.todotoday);

    const handleHead=(e)=>{
        setfh(e.target.value);
     }
 
     const handleElab = (e) =>{
         setEl(e.target.value);
     }

    const handleSubmit = (e) =>{
        e.preventDefault();
        props.onSubmit(fh,El);
    }

    // 其余代码不变...
}

这种方案的优势是用户在编辑时能看到当前的内容，编辑体验更直观，同时从根源上避免了空值提交的问题。

方案三：子组件提交前校验，拦截空值提交 #

如果需要在子组件层面就拦截空值提交，可以在handleSubmit中判断，只有当输入有内容时才调用父组件的回调：

const handleSubmit = (e) =>{
    e.preventDefault();
    // 可以根据需求调整校验逻辑，比如至少一个输入有值才提交
    if(fh.trim() || El.trim()){
        props.onSubmit(fh,El);
    } else {
        // 这里可以添加提示，比如alert("请输入修改内容")
        console.log("无有效输入，不提交");
    }
}

这种方式适合需要严格限制必须输入内容才允许提交的场景。

内容的提问来源于stack exchange，提问作者Akash Kr. Das