REST APIに投稿経由でフォームを送信するとNULLが返される

Question

RESTバックエンド（Playframeworkで書かれた）にFetchを使用してデータを送信したい。レストルートは存在し、機能します。

ここで、フォーム入力をバックエンドに送信します。

私のフォームは、次のようになります。

<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 
    }); 
} 

関数が呼び出され、ログが動作するコンソールを。しかし、Nullだけがバックエンドに送られます....

私の失敗は何ですか？

Answer 1

getElement**s**ByNameNodeListvalueプロパティを持たないコレクションを返します。

あなたは、この名前を持つ唯一の要素

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

があることを確認している場合あなたの入力が反応することによって制御しているようだ（あなたがvalueとonChange属性を指定した）ので、次のことができます状態を使用してリクエストボディを作成するだけです。

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