使用react-form来发布到API? [英] Using react-form to POST to an API?

问题描述

react-form的文档可以在此处找到.我在查找将POST操作传递到库的位置和方式时遇到问题.我有一个期望表单输入值的API，但似乎无法理解如何实际将组件发布到我指定的API端点.

Docs for react-form can be found here. I'm having issues locating where, and how, a POST action to a URL is passed to the library. I have an API that is expecting the values of the form inputs, but I cannot seem to understand how I actually get the component to POST to an API endpoint specified by me.

这是我的表单组件:

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;

推荐答案

对于执行http请求的fetch-api，我感到非常满意.

I am pretty Happy with the fetch-api for doing http requests.

示例:

  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

发挥作用就像魅力一样.嵌套许多带有Promise的请求可能会很烦人.

Works like a charm with react. Nesting many requests with promises can be kind of annoying though.

这篇关于使用react-form来发布到API?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！