使用react-form來POST到API？

可以找到反應形式的文檔here。我遇到的問題是，將URL的POST操作傳遞到庫的位置和方式。我有一個期望表單輸入值的API，但我似乎無法理解我是如何將組件POST到我指定的API端點的。使用react-form來POST到API？

這裏是我的表單組件：

import React, { Component } from 'react'; 
import { Form, Text, Select, Textarea } from 'react-form'; 

class DeploymentForm extends Component { 
    render() { 
     return (
      <Form 
       onSubmit={(values) => { 
        console.log('Success!', values) 
       }} 
       validate={({ name }) => { 
        return { 
         name: !name ? 'A name is required' : undefined 
        } 
       }} 
      > 
       {({submitForm}) => { 
        return (
         <div> 
          New STB Deployment 
          <form onSubmit={submitForm}> 
           <Text field='placeholder' placeholder='username'/> 
           <Text field='placeholder' placeholder='show'/> 
           <Text field='placeholder' placeholder='Git URL'/> 
           <Text field='placeholder' placeholder='Git Reference'/> 

           <Select 
            field='site' 
            options={[{ 
            label: ''placeholder', 
            values: true 
            }]} 
           /> 
           <Select 
            field='Runway' 
            options={[{ 
             label: 'Runway: stb', 
             values: true 
            }, { 
             label: 'Runway: stb2', 
             values: true 
            }, { 
             label: 'Runway: stb3', 
             values: true 
            } 
            ]} 
           /> 
           <Select 
            field='Cluster: Default' 
            options={[{ 
             label: 'placeholder', 
             values: true 
            }]} 
           /> 

           <Text field='hash' placeholder='placeholder' /> 

           <Textarea 
            field='pre-deploy' 
            placeholder='placeholder' 

           <Textarea 
            field='post-deploy' 
            placeholder='placeholder' 
           /> 

           <Text field='placeholder' placeholder='placeholder'/> 
           <Text field='placeholder' placeholder='placeholder'/> 

           <button type='submit'>Submit</button> 
          </form> 
         </div> 
        ) 
       }} 
      </Form> 
     ) 
    } 
} 

export default DeploymentForm;

來源

2017-10-17 Lukon

你render()方法看起來很複雜。嘗試將邏輯保持在render()方法之外。一個更好的方法來發布帖子請求看起來像這樣：

class DeploymentForm extends Component { 
constructor(props){ 
    super(props); 
    this.state={'username': ''} 
} 
handleChange(e){ 
    this.setState({username: e.target.value}); 
} 
handleSubmit(e){ 
    //call the api here with current state value (this.state.username) 
} 
render(){ 
    return(
    <form> 
    <input onChange={this.handleChange.bind(this)} type="text" name="username" placeholder="Enter name here" /> 
    <button onClick={this.handleSubmit.bind(this)}>Submit</button> 
    </form> 
) 
} 
}

來源

2017-10-17 22:11:03 Aditya

有趣。感謝你給我建議我的混亂。但是，出於好奇，我仍然沒有將這些數據實際發佈到URL端點的問題上。展示這樣的例子是否太麻煩？順便說一句，非常感謝你的時間。 – Lukon

在handleSubmit中使用$ .ajax POST方法會更容易。或者您也可以考慮使用axios（始終使用帶有異步等待的axios，遵循ES2017） – Aditya

有趣。我使用Axios進行HTTP請求，但從不進行POST。所以基本上，React不允許你指定一個表單動作/方法並以這種方式處理POSTS？爲什麼我需要在事件處理程序中自己處理這些信息？ – Lukon

我很高興與執行http請求的fetch-api。

實施例：

var myInit = { method: 'POST', 
       headers: {}, 
body: dataVar}; 

fetch('http://API.com', myInit).then(function(response) { 
    return response.json(); 
}).then(function(jsonResponse) { 
    //Success message 
console.log(jsonResponse); 
}).catch(error){ 
console.log(error); 
});

見參考：mozilla

作品像反應的魅力。然而，用承諾嵌套許多請求可能會令人討厭。

來源

2017-10-18 08:18:00 Mika

使用react-form來POST到API？

回答

相關問題