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

Question

我是Python开发学习JavaScript和React，我已经构建了一个简单的React应用程序，它消耗了我创建的API。我已经想出如何从我的API使用fetch到GET并在应用程序中使用该数据。

然而，我被困在尝试从组件中获取表单数据，将其存储为object，称为request_data，然后我将传递给按钮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)
    };