javascript - 无法在 React 表单中提交所有数据

Question

我在 React 中处理一个非常基本的表单，我很难让数据正确提交。在当前的设置中，只有“内容”字段正确提交，尽管名字、姓氏和电子邮件都写成相同的。单选按钮和下拉菜单也没有提交。有任何想法吗？

import React from "react";
import axios from "axios";
import '../ticket.min.css'
class Ticket extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            firstName: '',
            lastName: '',
            email: '',
            content: ''
        }
        this.ticketName = React.createRef();
        this.state = { tickets: [] };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.onValueChange = this.onValueChange.bind(this);
    }

    handleChange = event => {
        this.setState({ value: event.target.value });
    }

    handleSubmit = event => {
        alert('Your ticket has been submitted');
        event.preventDefault();
    }

    onValueChange = event => {
        this.setState({
            selectedOption: event.target.value
        });
    }

    addTicket = () => {
        let url = "http://localhost:8080/tickets";
        axios.post(url, { firstName: this.ticketName.current.value, lastName: this.ticketName.current.value, email: this.ticketName.current.value, content: this.ticketName.current.value }).then(response => {
            this.ticketName.current.value = "";
            alert('Your ticket has been submitted');
        });
    };

    getData = () => {
        let url = "http://localhost:8080/tickets";

        axios.get(url).then(response => this.setState({ tickets: response.data }));
    };


    render() {
        return (
            <div>
                <form>
                    <label>First Name:</label>
                    <input ref={this.ticketName} type="text" name="firstName"/><br></br>
                    <label>Last Name:</label>
                    <input ref={this.ticketName} type="text" name="lastName"/><br></br>
                    <label>Email:</label>
                    <input ref={this.ticketName} type="text" name="email"/><br></br>
                </form>
                <form onSubmit={this.handleSubmit}>
                    <label>
                        Select a Category:<br></br>
                        <select value={this.state.value} onChange={this.handleChange}>
                            <option value="hardware">Hardware</option>
                            <option value="software">Software</option>
                            <option value="internet">Internet</option>
                            <option value="other">Other</option>
                        </select>
                    </label>
                </form>
                <form>
                    <label>Please Describe Your Issue:</label><br></br>
                    <textarea name="content" ref={this.ticketName}/>
                </form>

                <form onSubmit={this.handleSubmit}>

                    <label>
                        Select the Urgency Level:<br></br>
                        <input type="radio" value="Urgent" checked={this.state.selectedOption === "Urgent"} onChange={this.onValueChange} />Urgent<br></br>
                        <input type="radio" value="Normal" checked={this.state.selectedOption === "Normal"} onChange={this.onValueChange} />Normal<br></br>
                        <input type="radio" value="Low Priority" checked={this.state.selectedOption === "Low Priority"} onChange={this.onValueChange} />Low Priority
                    </label>
                </form>

                <form>
                <button type="button" className="btn btn-primary" onClick={this.addTicket}>Submit</button>
                </form>

                <h3>Pending Tickets</h3>
                <button type="button" className="btn btn-primary" onClick={this.getData}>Show Pending</button>
                <ul>
                    {this.state.tickets.map(p => (
                        <li key={p.id}>

                            {p.firstName}{p.lastName}
                            {/* {p.firstName} : { p.complete ? "complete" : "not complete" } <button type="button" className="btn btn-success">Complete</button><button type="button" className="btn btn-danger">Delete</button> */}
                        </li>
                    ))}
                </ul>
            </div>
        );
    }
}
export default Ticket;

标签： javascriptreactjs

Answer 1

您应该将字段放在一个表单元素中并将按钮类型设置为提交。