reactJS通過發佈表單發送到REST API返回NULL

我想發送一些數據與提取到我的REST後端（用Playframework編寫）。休息路線的存在和工作。reactJS通過發佈表單發送到REST API返回NULL

現在我想將我的表單輸入發送到後端。

我的形式如下：

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

函數被調用時，控制檯登錄工作。但只有空發送到後端....

什麼是我的失敗？

來源

2017-04-11 Felix

'docume nt.getElementsByName（'title'）'返回一個數組，也許你應該嘗試'document.getElementsByName（'title'）[0] .value' –

getElement**s**ByName返回NodeList集合沒有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 
}

來源

2017-04-11 11:10:37

有沒有更智能的方法將表單映射成json？ – Felix

@Felix。是的，谷歌爲「反應控制輸入」https://facebook.github.io/react/docs/forms.html –

你的例子看起來不錯，但它返回alreay null – Felix

您的輸入似乎是由反應來控制（您指定value和onChange屬性），所以你可以只需使用狀態構建請求主體

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

來源

2017-04-11 11:13:15

reactJS通過發佈表單發送到REST API返回NULL

回答

相關問題