reactjs - 使用 Bootstrap 的 React 中的单选按钮总是发布相同的值

Question

我没有收到错误，但我正在编写的单选按钮总是向数据库发送相同的值，我不知道为什么或如何修复它。

更新。我附上了完整的代码。希望这能提供更多细节。一切正常，但单选按钮。有人可以说明我如何解决这个问题吗？

import React from "react";
import axios from "axios";
import Form from 'react-bootstrap/Form'
import Row from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'
import './Form.css'
class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = { tickets: [] };
        this.firstName = React.createRef();
        this.lastName = React.createRef();
        this.email = React.createRef();
        this.category = React.createRef();
        this.content = React.createRef();
        this.urgency = React.createRef();
    }

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        // Java Spring Boot uses port 8080
        let url = "http://localhost:8080/tickets";
        // axios.get(url).then(response => console.log(response.data));
        axios.get(url).then(response => this.setState({ tickets: response.data }));
    };

    addTicket = () => {
        let url = "http://localhost:8080/tickets";
        axios.post(url, {
            firstName: this.firstName.current.value,
            lastName: this.lastName.current.value,
            email: this.email.current.value,
            category: this.category.current.value,
            content: this.content.current.value,
            urgency: this.urgency.current.value

        }).then(response => {
            // refresh the data
            this.getData();
            // empty the input
            this.firstName.current.value = "";
            this.lastName.current.value = "";
            this.email.current.value = "";
            this.content.current.value = "";
        });
    };


    render() {
        return (
            <div>
                <form onSubmit={this.handleSubmit}>
                    <Form.Group className="Input">
                        <Form.Control type="text" name="firstName" placeholder="First Name" ref={this.firstName} />
                    </Form.Group>
                    <Form.Group className="Input">
                        <Form.Control type="text" name="lastName" placeholder="Last Name" ref={this.lastName} />
                    </Form.Group>
                    <Form.Group className="Input">
                        <Form.Control type="text" name="email" placeholder="Email" ref={this.email} />
                    </Form.Group>
                    <br></br>

                    <Form.Group className="dropdown">
                        <Form.Label>Select a Category:</Form.Label>
                        <Form.Control as="select" ref={this.category}>
                            <option value="hardware">Hardware</option>
                            <option value="software">Software</option>
                            <option value="internet">Internet</option>
                            <option value="other">Other</option>
                        </Form.Control>
                    </Form.Group>
                    <br></br>

                    <Form.Group className="Issue">
                        <Form.Label>Please Describe Your Issue:</Form.Label>
                        <Form.Control as="textarea" rows="7" ref={this.content} />
                    </Form.Group>

                    <fieldset>
                        <Form.Group as={Row}>
                            <Form.Label className="radio" column sm={12}>
                                Select the Urgency Level:<br></br>
                            </Form.Label>
                            <Form.Check className="radioButtons"
                                type="radio"
                                label="Urgent"
                                name="selectedOption"
                                value="Urgent"
                                ref={this.urgency}
                            />
                            <Form.Check className="radioButtons"
                                type="radio"
                                label="Standard"
                                name="selectedOption"
                                value="Standard"
                                ref={this.urgency}
                            />
                            <Form.Check className="radioButtons"
                                type="radio"
                                label="Low Priority"
                                name="selectedOption"
                                value="Low Priority"
                                ref={this.urgency}
                            />
                        </Form.Group>
                    </fieldset>

                    <Button variant="secondary" type="button" className="submit" onClick={this.addTicket}>Submit Ticket</Button>
                </form>
            </div>
        );
    }
}

export default Home;

标签： reactjsreact-bootstrap

Answer 1

问题是您一一指向this.urgency所有 Radio 组件。这是从上到下运行代码的简要模拟：

<Form.Group as={Row}>
  <Form.Label className="radio" column sm={12}>
    Select the Urgency Level:<br></br>
  </Form.Label>
  <Form.Check
    value="Urgent"
    ref={this.urgency} // <-- this.urgency is now pointing to this 1st component
  />
  <Form.Check
    value="Standard"
    ref={this.urgency} // <-- this.urgency is now pointing to this 2nd component
  />
  <Form.Check
    value="Low Priority"
    ref={this.urgency} // <-- this.urgency is now pointing to this 3rd component
  />
</Form.Group>

this.urgency因此，代码何时完成运行的最终参考是第三个组件。因此，当您访问this.urgency.current.value它时，它将始终返回第三个组件的值（即低优先级）

在 React 中，您通常使用 state 来保存这些值 -ref稀疏地使用并且仅在您确实需要时使用。

这是一个解决方案的示例：

constructor(props) {
  super(props);
  this.state = {
    tickets: [],
    urgency: "" // state for urgency
  };

<Form.Group as={Row}>
  <Form.Label className="radio" column sm={12}>
    Select the Urgency Level:<br></br>
  </Form.Label>
  <Form.Check
    value="Urgent"
    onChange={() => this.setState({ urgency: "Urgent" })}
  />
  <Form.Check
    value="Standard"
    onChange={() => this.setState({ urgency: "Standard" })}
  />
  <Form.Check
    value="Low Priority"
    onChange={() => this.setState({ urgency: "Low Priority" })}
  />
</Form.Group>

axios
  .post(url, {
    urgency: this.state.urgency
  })