reactJS 通过 Post 将表单发送到 REST API returns NULL

Question

我想使用 Fetch 将一些数据发送到我的 REST 后端（用 Playframework 编写）。休息路线存在并且有效。

现在我想将我的表单输入发送到后端。

我的表单如下所示：

<form idName="newForm" method="POST" action="" onSubmit={this.handleSubmit}>
      <Input type='text' required label={<T value="processes.new.inputTitle"/>} name='title' value={this.state.title} onChange={this.handleChange.bind(this, 'title')} maxLength={16}/>

我的 handleSubmit 看起来像这样：

handleSubmit = (event) => {
    event.preventDefault();

    console.log("Formular abgesendet");

    var newProcess = {
        a: document.getElementsByName('title').value,
        b: document.getElementsByName('responsible').value
    };

    var data = new FormData();
    data.append( "json", JSON.stringify( newProcess ) );

    fetch('http://localhost:9000/process', {
        method: 'post',
        body: data
    });
}

函数被调用，控制台Log生效。但是只有 Null 被发送到后端....

我的失败是什么？

Answer 1

getElement**s**ByName returns NodeList Collection 没有 value 属性.

如果您确定只有一个元素具有此名称

var newProcess = {
    a: document.getElementsByName('title')[0].value,
    b: document.getElementsByName('responsible')[0].value
}

或

var newProcess = {
    a: document.querySelector('[name=title]').value,
    b: document.querySelector('[name=responsible]').value
}

Answer 2

你的输入似乎是由 React 控制的（你指定了 value 和 onChange 属性）所以你可以简单地使用状态来构建请求主体

var newProcess = {
    a: this.state.title,
    b: this.state.responsible
};

reactJS 通过 Post 将表单发送到 REST API returns NULL

reactJS sending a Form via Post to a REST API returns NULL

rest

fetch

reactjs