React中表单输入值变更时如何更新对应字段并提交到Spring Boot后端

• React 中 props 是只读属性，直接修改 props.user.handicap 不会触发组件重渲染，输入框绑定的值不会更新，就会出现值回弹的问题
• 表单输入值没有通过组件内部 state 管理，修改后没有触发视图更新，所以输入内容不会同步展示

1. 先将输入框的 value 绑定到内部 state 的 myDataObject.user 对应字段，而非直接绑定 props.user
2. 输入变更时通过 setMyDataObject 更新 state，触发组件重渲染同步输入框内容
3. 提交时直接从 state 中取最新的用户参数调用后端接口

输入框绑定调整 #

<Input
  value={myDataObject.user.handicap}
  label={`Change handicap for ${props.user.firstname}`}
  onChange={onChangeHandicap}
/>
<Input
  value={myDataObject.user.sochcpred}
  label={`Change handicap reduction for ${props.user.firstname}`}
  onChange={onChangeHandicapReduction}
/>

输入变更逻辑调整 #

const onChangeHandicap = (event) => {
  const inputVal = event.target.value;
  setMyDataObject(prevState => {
    // 首次修改时缓存原始值
    const originalHandicap = prevState.originalHandicap ?? prevState.user.handicap;
    return {
      ...prevState,
      // 复制user对象更新字段，避免直接修改原对象
      user: {
        ...prevState.user,
        handicap: inputVal
      },
      originalHandicap
    }
  })
}

const onChangeHandicapReduction = (event) => {
  const inputVal = event.target.value;
  setMyDataObject(prevState => {
    const originalSochcpred = prevState.originalSochcpred ?? prevState.user.sochcpred;
    return {
      ...prevState,
      user: {
        ...prevState.user,
        sochcpred: inputVal
      },
      originalSochcpred
    }
  })
}

提交逻辑调整 #

const updateHandicap = async () => {
  const { id, handicap, sochcpred } = myDataObject.user;
  // 可自行添加参数合法性校验，比如是否为合法数字、范围校验等
  try {
    // 调用后端SpringBoot接口，示例用fetch，可替换为你项目用的axios等请求库
    await fetch(`/你的接口路径/${id}`, {
      method: 'PUT',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ handicap, sochcpred })
    })
    // 提交成功后关闭弹窗，可自行添加成功提示、通知父组件刷新用户列表等逻辑
    handleClose();
  } catch (err) {
    // 错误处理，可将报错存入state的errors字段在表单展示
    setMyDataObject(prev => ({
      ...prev,
      errors: { submit: '更新失败，请重试' }
    }))
  }
}

可选优化：取消提交时重置表单 #

避免下次打开弹窗残留上次未提交的修改内容

const handleClose = () => {
  // 重置state为初始值
  setMyDataObject({
    user: props.user,
    originalHandicap: undefined,
    originalSochcpred: undefined,
    errors: {}
  })
  // 原有关闭弹窗的逻辑
}

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