React JS 中未选择下拉菜单

Question

我正在尝试创建一个注册表单，如果用户在选择角色中选择“教师”或“学生”，则该注册表单将注册用户。问题是，如果我删除该用户的

<select>

标签代码，用户在 Strapi CMS 管理仪表板上注册，当我添加代码的

<select>

部分时，我没有得到任何响应，谢谢。

这是代码

import axios from 'axios';
import React, { useState } from 'react';
import { FormGroup, Input, Label, Button, Row, Col } from 'reactstrap';
import { Link, Navigate } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
import { toast } from 'react-toastify';
import Select from 'react-dropdown-select';

const initialUser = {
  username: '',
  email: '',
  password: '',

};

const Registration = () => {
  const [user, setUser] = useState(initialUser);

  const navigate = useNavigate();
  const signUp = async () => {
    const url = 'http://localhost:1337/api/auth/local/register';
    try {
      if (
        user.username &&
        user.email &&
        user.password &&
        (user.student || user.teacher)
      ) {
        const res = await axios.post(url, user);
        if (res) {
          setUser(initialUser);
          navigate('/login');
        }
      }
    } catch (error) {
      toast.error(error.message, {
        hideProgressBar: true,
      });
    }
  };

  const handleUserChange = ({ target }) => {
    // Allow typing in the input boxes
    const { name, value } = target;
    setUser(currentUser => ({
      ...currentUser,
      [name]: value,
    }));
  };
  return (
    <Row className="register">
      <Col sm="12" md={{ size: 4, offset: 4 }}>
        <div className="signup-form">
          <h2>Sign Up</h2>
          <FormGroup>
            <Label for="username" className="required-field">
              User Name
            </Label>
            <Input
              type="text"
              id="username"
              name="username"
              value={user.username}
              onChange={handleUserChange}
              placeholder="Enter your full name"
            />
          </FormGroup>
          <FormGroup>
            <Label className="required-field">Email</Label>
            <Input
              type="email"
              id="email"
              name="email"
              value={user.email}
              onChange={handleUserChange}
              placeholder="Enter Email"
            />
          </FormGroup>
          <FormGroup>
            <Label className="required-field">Password</Label>
            <Input
              type="password"
              id="password"
              name="password"
              value={user.password}
              onChange={handleUserChange}
              placeholder="Enter Password"
            />
          </FormGroup>
          <FormGroup>
            <label>
              <span className="required-field">Role:</span>
              <select>
                <option>Choose Role</option>
                <option name="student" value={user.student}>
                  Student
                </option>
                <option name="teacher" value={user.teacher}>
                  Teacher
                </option>
              </select>
            </label>
          </FormGroup>
          <Button color="primary" onClick={signUp}>
            Sign Up
          </Button>
          <h6>
            Already have an account? Click <Link to="/login">Here</Link> to
            login
          </h6>
        </div>
      </Col>
    </Row>
  );
};

export default Registration;
`

const Registration = () => {
  const [user, setUser] = useState(initialUser);

  const navigate = useNavigate();
  const signUp = async () => {
    const url = 'http://localhost:1337/api/auth/local/register';
    try {
      if (
        user.username &&
        user.email &&
        user.password &&
        (user.student || user.teacher)
      ) {
        const res = await axios.post(url, user);
        if (res) {
          setUser(initialUser);
          navigate('/login');
        }
      }
    } catch (error) {
      toast.error(error.message, {
        hideProgressBar: true,
      });
    }
  };

我希望当我选择 user.student 或 user.teacher 时它会记录

Answer 1

包含角色属性来捕获用户的角色。

if (user.username && user.email && user.password && user.role)

使用 onChange 来处理 select 中的角色

<select onChange={handleRoleChange} value={user.role}>
        <option value="">Choose Role</option>
        <option value="student">Student</option>
        <option value="teacher">Teacher</option>
    </select>

手柄角色变更功能示例：

    const handleRoleChange = (event) => {
        setUser((currentUser) => ({
            ...currentUser,
            role: event.target.value,
        }));
    };

希望这有帮助！...