React Form 未对数据进行编码

Question

我有一个带有表单的简单 React 无状态组件。

<form
  action="http://externalsite.com/?param1=value1"
  method="get"
  target="_blank"
>
  <input type="text" name="address" id="address" />
  <input
    className="btn"
    type="submit"
    value="Submit"
  />
  </div>
</form>

提交表单后，数据会以

的形式发送到外部站点

http://externalsite.com/?param1=value1&address=word1+word2+word3

如何使用正确的 url 编码提交表单？

http://externalsite.com/?param1=value1&address=word1%20word2%20word3

更新：我知道我可以处理提交事件并在提交之前对其进行手动编码。表单没有自动执行此操作是否有原因？

Answer 1

提交表单后，您需要从表单数据创建 url 字符串，如下所示。

(function (address='address', word='word1 and word 2') {

var url = 'somthing.com';
var parm1= `address=${address}`;
var parm2=`word=${word}`;

var url = [url, parm1, parm2];
//here join(&) create a required url
console.log(url.join('&')); })();