Utilisation de la forme de réaction pour POST à ​​une API?

Question

Des documents pour la forme de réaction peuvent être trouvés here. J'ai des problèmes pour localiser où, et comment, une action POST à ​​une URL est passée à la bibliothèque. J'ai une API qui attend les valeurs des entrées de formulaire, mais je n'arrive pas à comprendre comment j'obtiens réellement le composant à POST à ​​un point de terminaison API spécifié par moi.

Voici mon composant de formulaire:

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; 

Answer 1

Votre méthode render() semble compliqué. Essayez de garder la logique en dehors de la méthode render(). Une meilleure approche pour faire une demande de poste ressemble à ceci:

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

Answer 2

Je suis très heureux avec le fetch-api pour faire des requêtes http.

Exemple:

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

Voir référence: mozilla

fonctionne comme un charme avec réaction. Imbrication de nombreuses demandes avec des promesses peut être un peu ennuyeux.