React textarea 通过 API PUT 删除换行符保存到数据库

Posted 2023-02-22

【中文标题】React textarea 通过 API PUT 删除换行符保存到数据库

【英文标题】：React textarea save to database via API PUT removing linebreaks

【发布时间】：2016-03-21 09:29:58

【问题描述】：

我正在使用$ajax 将 cmets 放入我的 react 应用程序的数据库中。 cmets 毫无问题地从 textarea 保存并在我的应用程序中呈现 - 但没有换行符。

根据这个线程https://github.com/ssorallen/turbo-react/issues/22 react 故意删除换行符。前端有没有办法解决这个问题？

我尝试了几种不同的方法（其中大部分是ReactJS - multiline textarea 的一个版本）： 用\\\n 替换\n；将\n 替换为br（不仅不起作用，而且由于html br 元素在textarea 中呈现，因此也很难看）；在 PUT 上使用 encodeURI，在 GET 上使用 decodeURI。这些尝试的解决方案导致我的 API PUT 请求出错，因为它无法保存编码 URI 中的特殊字符，并且来自 \\\n 的反斜杠被视为正斜杠，因此导致 API 调用获得错误的搜索路径（如api/comment/12312/Thisisa/nComment）。

组件非常庞大，但这是 textarea 渲染部分：

var resourceInputValue = this.state.resourceValue;
var commentInputValue = this.state.commentValue;

(...)

<div className="detailsForms">
        <form>
          <textarea type="text" name="comment" className="commentForm" placeholder="Comment" defaultValue=commentInputValue onChange=this.changeComment/><img src="img/cancel.png" className="clearComment" onClick=this.clearComment/>
        </form>
        <div className="formButtonDiv">
          <button className="formButton" type="button" onClick=this.putComment>Add Comment</button>
        </div>

      </div>

还有方法：

getInitialState: function()
    return 
      commentValue: this.props.orderProps.comment
    
  ,

changeComment: function(event)
    this.setState(
      commentValue: event.target.value
    );

    if(event.target.value === "") 
      this.setState(
        commentValue: null
      );
    
  ,

  putComment: function()

    $.ajax(
      type: "PUT",
      url: apiUrl + 'api/OrderComment/' + this.state.detailsId + "/" + this.state.commmentValue,
      beforeSend: function (xhr) 
        xhr.setRequestHeader("Authorization", 'Bearer ' + token);
      ,
      success: function () 
        document.getElementsByClassName("formButton")[1].className += " formButtonSuccess";
        document.getElementsByClassName("formButton")[1].innerHTML = "Done!";
        clearInterval(timer);
        ajaxCallOrders();
      ,
      done: function()

      
    ).fail(function (_d) 
      document.getElementsByClassName("formButton")[1].className += " formButtonFail";
      document.getElementsByClassName("formButton")[1].innerHTML = "Try again";
    );
  ,

【参考方案1】：

在发送文本之前尝试运行encodeURI() 并在后端对其进行解码。