React中提交textarea空值时自动发送字符串“None”的实现方法

你只需要在提交参数构造前对addLoanClause做值处理即可，不会影响输入框的正常交互体验：

1. 在handleSubmit函数开头先预处理字段值，空值（支持判断全空格场景）替换为None
2. 把两处参数构造时用到的addLoanClause替换为预处理后的值即可

修改后的代码示例：

const [addLoanClause, setAddLoanClause] = useState("");

const handleSubmit = () => {
  // 新增字段预处理逻辑
  // 如果不需要把全空格视为空值，删除.trim()即可
  const processedAddLoanClause = addLoanClause.trim() === '' ? 'None' : addLoanClause;

  if (id) {
    var loanProposalDetailsUpdateObject = {
      ...
      addLoanClause: processedAddLoanClause, // 替换为预处理后的值
    };
    if (dataChanged(loanProposalDetailsUpdateObject)) {
      updateUserLoanProposalRequest({
        loanProposalDetails: loanProposalDetailsUpdateObject,
      }).then(() => {
        routeToNextPage(isUserLoanRequestInitiator, router, id);
      });
    }
    else {
      routeToNextPage(isUserLoanRequestInitiator, router, id);
    }
  } else {
    props
      .createUserLoanRequest({
        requestType: transactionType,
        status: "draft",
        loanProposalDetails: {
          ...
          addLoanClause: processedAddLoanClause, // 替换为预处理后的值
        },
      })
      .then(data => {
        routeToNextPage(isUserLoanRequestInitiator, router, data.id);
      });
   }
 };

<DynamicWidthInput
  id="addLoanClause"
  value={addLoanClause}
  type="textarea"
  placeholder="1000 characters"
  error={showErrors && getError("addLoanClause")}
  onChange={e =>
    handleDynamicStateChange(e, setAddLoanClause)
  }
  size={"xxl"}
  rows="5"
/>

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