javascript - react : How to create a form which gets select data from an API and posts to another API then clears fields on submit?

Question

我正在尝试创建一个表单，该表单使用 GET 请求从 API 端点获取选择数据，然后向另一个端点发出 POST 请求。我可以做得很好，但是提交表单后我很难重置表单。必须有一种更直接的方法来执行此操作，而不是我正在使用的方法？

import React, { Component } from "react";

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

const url = 'http://localhost:8000/api/tasks/';

class Submit_job extends Component {

    constructor(){
        super();
        this.state = {
            "profiles": [],
            "material_id": null,
            "transcode_profile": null,
            "start_date": null,
            "end_date": null,
        };
    };

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

    onChange = (e) => {
        // Because we named the inputs to match their corresponding values in state, it's
        // super easy to update the state
        const state = this.state;
        state[e.target.name] = e.target.value;
        this.setState(state);
    };

    postData = (e) => {
        e.preventDefault();

        let data = {
            status: 'submitted',
            video_data: {material_id: this.state.material_id},
            profile_data: {name: this.state.transcode_profile },
            start: this.state.start_date,
            end: this.state.end_date,
            user: 'foobar'
        };

        return fetch(url, {
            body: JSON.stringify(data), // must match 'Content-Type' header
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include, same-origin, *omit
            headers: {
                'user-agent': 'Mozilla/4.0 MDN Example',
                'content-type': 'application/json'
            },
            method: 'POST', // *GET, POST, PUT, DELETE, etc.
            mode: 'cors', // no-cors, cors, *same-origin
            redirect: 'follow', // *manual, follow, error
            referrer: 'no-referrer', // *client, no-referrer
        })
            .then(response => response.json()) // parses response to JSON
    };

    render() {
        return (
            <div>
                <h2>Submit Job</h2>
                <form onSubmit={this.postData}>
                    <label htmlFor="material_d">Material ID:</label>
                    <input id="material_id"
                           type="text"
                           name="material_id"
                           onChange={this.onChange}
                           required/>
                    <br/>
                    <label htmlFor={"transcode_profile"}>Transcode Profile:</label>
                    <ProfileList
                        onChange={this.onChange}
                        profiles={this.state.profiles}
                    />
                    <br/>
                    <label htmlFor="start_date">Start Date:</label>
                    <input type="text"
                           name="start_date"
                           id="start_date"
                           onChange={this.onChange}
                           required/>
                    <br/>
                    <label htmlFor="end_data">End Date:</label>
                    <input type="text"
                           name="end_date"
                           id="end_date"
                           onChange={this.onChange}
                           required/>
                    <br/>

                    <button>Submit</button>
                </form>
            </div>

        );
    }
}

export default Submit_job;

Answer 1

postData = (e) => {
        e.preventDefault();

        let data = {
            status: 'submitted',
            video_data: {material_id: this.state.material_id},
            profile_data: {name: this.state.transcode_profile },
            start: this.state.start_date,
            end: this.state.end_date,
            user: 'foobar'
        };

        return fetch(url, {
            body: JSON.stringify(data), // must match 'Content-Type' header
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include, same-origin, *omit
            headers: {
                'user-agent': 'Mozilla/4.0 MDN Example',
                'content-type': 'application/json'
            },
            method: 'POST', // *GET, POST, PUT, DELETE, etc.
            mode: 'cors', // no-cors, cors, *same-origin
            redirect: 'follow', // *manual, follow, error
            referrer: 'no-referrer', // *client, no-referrer
        })
            .then(response => { 
             response.json()
             this.setState({ materialid: '', })
          }
     ) // parses response to JSON
    };

为每个输入添加一个 value 属性，因此当我们在提交时将这些值的状态设置为空时，该值将在输入中更新。

<input id="material_id"
  value={this.state.matierial_id}
  type="text"
  name="material_id"
  onChange={this.onChange}
  required

/>