如何使用 KotlinJS 和 React 提交表单？答案

【问题标题】：How to submit a form with KotlinJS and React?如何使用 KotlinJS 和 React 提交表单？
【发布时间】：2021-12-19 09:52:33
【问题描述】：

我想显示一个文件选择器和一个提交按钮。该文件仅在单击按钮后提交。不过，提交/操作目标位于另一台服务器上。我查看了反应示例，但我无法弄清楚如何使用 KotlinJS 和 React 实现这一点。

formMethod 和 onSubmitFunction 中的重复项只是我尝试并看到什么坚持。我还尝试将method = FormMethod.post, encType = FormEncType.multipartFormData 直接添加到表单中，但没有帮助。它甚至不输出调试打印。

编辑：我不需要对文件做任何事情，而是想利用默认表单功能进行上传。另一台服务器也是我的，有一个简单的 html/http 上传就足够了：

<form method="post" enctype="multipart/form-data">
      <input type="file" name="file">
      <input type="submit" value="Upload">
</form>

结束编辑

EDIT2：我稍微更改了代码，现在它引用了另一台服务器，但不附加任何文件。

private fun RBuilder.render() {
    form(
        method = FormMethod.post,
        encType = FormEncType.multipartFormData,
        action = "https://otherserver.com/upload"
    ) {
        styledInput {
            attrs {
                type = InputType.file
                accept = ".zip"
                multiple = false
           }
        }
        styledInput {
            attrs {
                type = InputType.submit
                value = "Test"
            }
        }
    }
}

【问题讨论】：

标签： reactjs kotlin-js kotlin-js-interop

【解决方案1】：

似乎在这种情况下 name 参数是严格要求的。

以下作品：

private fun RBuilder.render() {
    form(
        method = FormMethod.post,
        encType = FormEncType.multipartFormData,
        action = "https://otherserver.com/upload"
    ) {
        styledInput {
            attrs {
                name = "upload"
                type = InputType.file
                accept = ".zip"
                multiple = false
           }
        }
        styledInput {
            attrs {
                type = InputType.submit
                value = "Test"
            }
        }
    }
}

【讨论】：