javascript - React，如何将表单数据发布到 API 端点？

Question

我是学习 JavaScript 和 React 的 Python 开发人员，我构建了一个简单的 React 应用程序，它使用我创建的 API。我已经弄清楚如何使用 fetch 从我的 API 中获取 GET 并在应用程序中使用该数据。

但是我一直在尝试从组件中获取表单数据，将其存储为一个名为 request_data 的 object，然后我将其传递给 submit_task( ) 在按钮 onClick 上。

你是怎么做到的？

import React, { Component } from "react";

const ProfileList = ({profiles}) => (
    <select>
        <option value="-----">----</option>
        {profiles.map(profile => <option value={profile.name}>{profile.name}</option>)}
    </select>
);


class Submit_job extends Component {

    constructor(){
        super();
        this.state = {
            "profiles": [],
        };
        this.request_data = {}
    };

    componentDidMount(){
        fetch("http://localhost:8000/api/profiles/")
            .then(response => response.json())
            .then(response => this.setState({ profiles: response}))
    }

    submit_task(data) {
        fetch("http://localhost:8000/api/tasks/",
            {
                method: "POST",
                cache: "no-cache",
                headers:{
                    "content_type": "application/json"
                },
                body: JSON.stringify(data)
            })
            .then(response=> response.json())

    }

    render() {
        return (
            <div>
                <h2>Submit Job</h2>
                <form id="submit_job">
                    <label>
                        Material ID:
                        <input type="text" name="material_id"/>
                    </label>
                    <br/>
                    <label>
                        Transcode Profile:
                        <ProfileList profiles={this.state.profiles}/>
                    </label>
                    <br/>
                    <label>
                        Start Date:
                        <input type="text" name="start_date"/>
                    </label>
                    <br/>
                    <label>
                        End Date:
                        <input type="text" name="end_date"/>
                    </label>
                    <br/>
                </form>
                <button onClick={this.submit_task(this.request_data)}>Submit</button>
            </div>

        );
    }
}

export default Submit_job;

Answer 1

在你的表单中

<form id="submit_job" onSubmit={this.onSubmit}>
                    <label>
                        Material ID:
                        <input type="text" name="material_id" onChange={this.handleChange}/>
                    </label>
                    <br/>
                    <label>
                        Transcode Profile:
                        <ProfileList profiles={this.state.profiles}/>
                    </label>
                    <br/>
                    <label>
                        Start Date:
                        <input type="text" name="start_date" onChange={this.handleChange}/>
                    </label>
                    <br/>
                    <label>
                        End Date:
                        <input type="text" name="end_date" onChange={this.handleChange}/>
                    </label>
                    <br/>
                    <button type="submit">Submit</button>
                </form>

现在在你的类里面

handleChnage = (e) => {
 this.setState({...this.state.request_data, [event.data.target]: event.data.value})
}

        onSubmit = () => {
          console.log(this.state.request_data)   // you should be able to see your form data
      }

在你的构造函数中

constructor(){
        super();
        this.state = {
            "profiles": [],
            material_id: null,
           start_data: null,
           end_data: null
        };

        this.handleChange = this.handleChange.bind(this)
    };